Javascript 如何在React for navigation的模式/对话框中传递路由器道具

我被一个问题困住了。我在React项目中添加了一个登录组件。该登录模块采用模式/对话框形式。登录组件按钮位于项目的标题组件中。像往常一样，我没有为这个登录模块设置路由器路径，因此我无法设置道具。我不想将登录组件单独移动，因为这是必需的。那么我应该如何获得

历史道具来检查页面路径呢

打开登录对话框窗口的标题组件的一部分

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

{
this.state.sessionValid(
登录
报名
) : (
注销
);
}

登录组件：

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

render（）{
返回(
登录
登录
报名
);
}

路由器功能的一部分

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

返回(
肮脏的道路
您可以将历史记录作为您的

从“历史”导入{createBrowserHistory}；
const history=createBrowserHistory（）；
...
导出默认函数main（）{
...
返回(
}

我用过很多次这种技术，效果很好，但很混乱，很难维护

React钩子：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);
}

import*as React from“React”；
从“react Router dom”导入{Router，Route}；
const RouterContext=React.createContext（null）；
导出常量HookedBrowserRouter=（{子项，历史记录}）=>(
{routeProps=>(
{儿童}
)}
);
导出函数useRouter（）{
返回React.useContext（RouterContext）；
}

将您的
替换为刚才定义的

然后在使用react挂钩的任何组件中：

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

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

从“./router”导入{useRouter}；
导出默认函数YourComponent（）{
const{history}=useRouter（）；
//对历史做点什么
返回；
}
登录组件是通过单击标题组件上的按钮来显示的。因此，我在这里使用窗口的位置功能来工作。我提供了此功能的概述，以便您了解一些信息

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

导出默认类HeaderComponent扩展组件{
.
.
submitLogin=（）=>{
window.location.href='/'
}
.
.
render（）{
返回(
.
.
.
.
)}}
只是现在就尝试实现它。与以前的相比，它实际上很复杂。我试图在
中将历史作为道具传递（它存在于src文件夹之外的App.js中），编译器不接受
const{history}=useRouter（）
。你能帮我一个忙，告诉我你在头组件中传递的
历史记录是什么吗。我从
历史记录
包中创建历史记录，用正确的代码更新了我的答案。我也不知道你为什么会经历这种痛苦。在下面发布答案：）我不建议违背HTML5历史API，如果有人试图将您的代码与使用哈希URL配置的路由器一起使用会怎么样？对于您的具体情况可能没问题，但最佳做法是保持最大的兼容性，这就是为什么人们定义并构建完整的库以使其易于实现。React本身没有bui在路由解决方案中。因此，库使用了浏览器的
窗口提供的完全相同的功能。位置
，将其包装在react代码中。此外，即使您知道这一点，您所做的操作也不友好。我们的代码应该对用户友好，即使对于将来接管项目的人，您必须知道。此外，我可以向您保证viour与
window.location.href='/someroute'
完全相同，只是这个
someroute
应该由您在
BroswerRouter
中提供，但是如果需要传递参数，您将需要
this.props
，这是它需要的地方。我的问题只有这个答案，没有其他答案。
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>
)}}