如何在React的模式/對話框中傳遞路由器道具進行導航

Question

我陷入一個問題。 我在我的React-Project中添加了一個登錄組件。 該登錄模塊為模式/對話框形式。 登錄組件按鈕位於項目的頁眉組件中。 像往常一樣，我沒有為此登錄模塊設置路由器路徑，因此無法設置道具。 我不想將登錄組件單獨移動，因為這就是要求。 那么我應該如何獲得history props來檢查頁面路線

Header組件的一部分，用於打開登錄對話框窗口

{
  this.state.sessionValid ? (
    <div className="flex">
      <Button edge="end" color="inherit" onClick={this.openLogin.bind(this)}>
        Login
      </Button>
      <Button edge="end" color="inherit" onClick={this.openSignup.bind(this)}>
        Signup
      </Button>
    </div>
  ) : (
    <div>
      <Button edge="end" color="inherit">
        Logout
      </Button>
    </div>
  );
}

登錄組件：

render() {
  return (
    <div>
      <Dialog
        open={this.props.openLogin}
        TransitionComponent={Transition}
        keepMounted
        onClose={this.props.closeLogin}
        aria-labelledby="alert-dialog-slide-title"
        aria-describedby="alert-dialog-slide-description"
      >
        <DialogContent style={{ padding: 50 }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <h2>Login</h2>
            <CardMedia
              component="img"
              alt="Image for signup"
              style={{ width: "30%", borderRadius: 5 }}
              image="logo.png"
              title="Front"
            />
          </div>

          <form style={{ marginTop: 0 }} onSubmit={this.submit.bind(this)}>
            <div>
              <TextField
                fullWidth={true}
                required={true}
                label="Email"
                value={this.state.formData.email}
                onChange={this.handleChange.bind(this, "email")}
                margin="normal"
              />
            </div>

            <Button color="primary" type="submit" disabled={this.formCheck()}>
              Login
            </Button>

            <Button color="primary" onClick={this.props.openSignupInstead}>
              Signup
            </Button>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}

路由器功能的一部分。

return (
    <div>
      <BrowserRouter>
        <header className="mainHeader">
          <HeaderComponent />
        </header>

Answer 1

骯臟的方式

您可以將歷史記錄作為<HeaderComponent />道具傳遞

import { createBrowserHistory } from "history";
const history = createBrowserHistory();
...
export default function main() {
    ...
    return (
    <div>
      <BrowserRouter history={history>
        <header className="mainHeader">
          <HeaderComponent history={history} />
        </header>
}

我曾多次使用過這種技術，其工作原理很吸引人，但是卻變得凌亂且難以維護。

React Hooks：useRouter

由於react 16.8引入了hooks ，因此您可以使用它來定義您的組件，然后在任何地方使用react router useRouter鈎子來訪問路由器和訪問歷史記錄。

import * as React from "react";
import { Router, Route } from "react-router-dom";

const RouterContext = React.createContext(null);

export const HookedBrowserRouter = ({ children, history }) => (
  <Router history={history}>
    <Route>
      {routeProps => (
        <RouterContext.Provider value={routeProps}>
          {children}
        </RouterContext.Provider>
      )}
    </Route>
  </Router>
);

export function useRouter() {
  return React.useContext(RouterContext);
}

用您剛定義的<HookedBrowserRouter history={history}>替換您的<BrowserRouter>

然后在任何組件中使用react掛鈎：

import { useRouter } from "../router";

export default function YourComponent() {
  const { history } = useRouter();
  // Do something with history
  return <div />;
}

Answer 2

通過單擊標題組件上的按鈕來顯示登錄組件。 所以在這里，我正在使用窗口的位置功能。 我對此進行了概述，以便您有所了解。

export default class HeaderComponent extends Component {
   .
   .
submitLogin = () =>{
    window.location.href= '/'
 }
   .
   .

render() {
   return (
    <div>
   .
   .
<LoginComponent
    openLogin={this.state.openLogin}
    closeLogin={this.closeLogin.bind(this)}
    openSignupInstead={this.openSignupInstead.bind(this)}
    submitLogin={this.submitLogin.bind(this)} />
   .
   .
 </div>
)}}