如何在React的模式/对话框中传递路由器道具进行导航

Question

I am stuck on a problem. I have added a login component in my React-Project. That login module is in a modal/dialog form. Login component button resides in Header component of the project. As usual i am not setting a router path for this login module and so i am not able to set the props. I don't want to move login component in a separate as thats the requirement. So how should i get history props to check the page route

Part of Header component that opens up the login dialog window

{
  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>
  );
}

Login component:

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>
  );
}

Part of Router function.

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

Answer 1

Dirty way

You can pass history as props of your <HeaderComponent />

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

I used this technic many times, works like a charm but get really messy and difficult to maintain.

React Hooks: useRouter

Since react 16.8 introduced hooks , you can use that to define your component, and then use the react router useRouter hook anywhere to access your router and access history.

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);
}

Replace your <BrowserRouter> with <HookedBrowserRouter history={history}> you just defined

Then in any component using react hooks:

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

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

Answer 2

Login component is shown by clicking on a button on header component. So here i am using window's location feature to work. I am providing an overview of this, so that you may get a little idea.

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>
)}}