Reactjs react路由器中的URL参数出现问题_Reactjs_React Router

Reactjs react路由器中的URL参数出现问题

reactjs

Reactjs react路由器中的URL参数出现问题,reactjs,react-router,Reactjs,React Router,我一直在尝试使用react路由器的路由器、路由和交换机组件来跟踪但是我完全无法让URL参数正常工作。我可以让所有其他路线工作，但任何涉及/：变量的事情，我似乎都无法工作从他们的文档中，他们有以下代码： import { Switch, Route } from 'react-router' <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={

我一直在尝试使用react路由器的路由器、路由和交换机组件来跟踪

但是我完全无法让URL参数正常工作。我可以让所有其他路线工作，但任何涉及/：变量的事情，我似乎都无法工作

从他们的文档中，他们有以下代码：

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

有人能看出我的错误吗

如果有帮助的话，请在我当前的回购协议中删除此文件

谢谢

导致此问题的原因如下

您试图请求服务器为您获取resetpassword/123页面，而服务器不知道它是什么。您正在使用react路由器并在客户端设置路由

当您第一次请求PageLocalHost 8000时，您将获得客户端所需的所有javascript文件。从那个时起，react路由器就出现了，若你们点击一个链接，它会检查客户端是否有匹配的路由，并呈现相应的组件。即使在你的情况下，如果你直接有一个按钮说'重置密码'，在这个如果你说导航到重置密码路线，它完美的工作

若你们需要你们的应用程序在直接点击URL的情况下也能工作，那个么你们可能也应该让服务器理解路由。如果您使用的是IIS或其他机制，您的服务器知道它需要首先获取所需的所有javascript，然后导航到您提供的路由，那么您可以查看URL重写

您正在使用index.html文件中的相对路径包含脚本和css文件。将其更改为绝对路径，如下所示：

您在导航到ResetPassword路线的位置有按钮单击或链接单击吗？没有。现在我只是想直接导航到它。重置密码后使用任何字符串。所以http://localhost:8000/resetpassword/123 例如，我的节点服务器设置总是发送相同的html和js文件，不管点击哪个URL。这就是为什么我能够直接点击/login或/dashboard并让它工作的原因。基于这一点，我误用react路由器的方式显然是一个纯粹的客户端问题。如果是这种情况，您是否可以添加一个按钮并尝试在其上重置密码？在此基础上，我们可以检查是什么导致了问题，然后再进行检查！我肯定是新手犯了错误。

const AppRouter = () => {
    return (
        <Router>
            <div>
                <Header />

                <Switch>
                    <Route exact path="/" component={HomePage} />
                    <Route path="/pricing" component={PricingPage} />
                    <Route path="/contact" component={ContactPage} />
                    <Route path="/signup" component={SignupPage} />
                    <Route path="/login" component={LoginPage} />
                    <Route path="/forgotpassword" component={ForgotPasswordPage} />

                    <Route path="/resetpassword/:token" component={ResetPasswordPage} />

                    <PrivateRoute path="/dashboard" component={DashboardPage} />
                </Switch>
            </div>
        </Router>
    );
};

GET http://localhost:8000/resetpassword/dist/style.css net::ERR_ABORTED
GET http://localhost:8000/resetpassword/dist/bundle.js 404 (Not Found)

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>React Boilerplate Project</title>
    <!-- use absolute path here with starting / -->
    <link rel="stylesheet" href="/dist/style.css"> </head>

<body>
    <div id="root"></div>
    <!-- use absolute path here with starting / -->
    <script src="/dist/bundle.js"></script> </body>

</html>