react-router中的URL参数问题

Question

I have been trying to follow the docs in using react-router's Router, Route, and Switch components. 我一直在尝试使用react-router的Router，Route和Switch组件来遵循文档。

But I have been completely unable to get URL parameters working. 但是我一直无法使URL参数正常工作。 I can get all other routes working, but anything that involves /:variable , I just cannot seem to get working. 我可以使所有其他路径正常工作，但是任何涉及/:variable东西，我似乎都无法正常工作。

From their docs, they have this code: 从他们的文档中，他们有以下代码：

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>

And I have this: 我有这个：

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

Every single component/route works except for /resetpassword/:token and I cannot for the life of me figure out why. 除了/resetpassword/:token之外，每个组件/路由都可以工作，我一生都无法找出原因。

When I go to http://localhost:8000/resetpassword it actually shows me my header component. 当我转到http://localhost:8000/resetpassword它实际上显示了我的标头组件。

When I go to http://localhost:8000/resetpassword/ or http://localhost:8000/resetpassword/123 , I get these errors in the console: 当我转到http://localhost:8000/resetpassword/或http://localhost:8000/resetpassword/123 ，在控制台中出现以下错误：

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

Can anyone spot my mistake? 谁能发现我的错误？

Here is a link to this file in my current repo if that would help. 如果可以的话，这是我当前存储库中此文件的链接。

Thanks 谢谢

Answer 1

You are including your script and css file using relative paths in your index.html file. 您正在使用index.html文件中的相对路径包括脚本和css文件。 Change it to absolute paths, like this: 将其更改为绝对路径，如下所示：

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

Answer 2

One cause for this issue could be as below 此问题的一个原因可能如下

You are trying to request server to get resetpassword/123 page for you where the server is not aware of what it is. 您正在尝试请求服务器获取服务器不知道它的内容的resetpassword / 123页面。 You are using react-router and setting up routes at client side. 您正在使用react-router并在客户端设置路由。

When you first request for a page(probably localhost 8000), you will get all the javascript files that you need to client side. 首次请求页面（可能是localhost 8000）时，您将获得客户端所需的所有javascript文件。 And from then react router comes into place where if you click on a link, it checks if there are any matched routes at client side and renders appropriate component. 然后从那开始，反应路由器就位，如果您单击链接，它将检查客户端是否有任何匹配的路由并提供适当的组件。 Even in your case, if you directly have a button say 'Reset Password' and in this if you say to navigate to resetpassword route, it perfectly works. 即使在您的情况下，如果您直接有一个按钮说“重置密码”，在这种情况下，如果您说要导航到“重置密码”路线，它也可以正常工作。

If you need your application to work even when URL is directly hit, you should probably make server aswell understand routing. 如果即使直接命中URL也需要应用程序正常工作，则可能还应使服务器也了解路由。 You can take a look at URL Rewriting (if you are using IIS) or someother mechanism where your server understands that it needs to get all the javascript needed first and then navigate to the route you provided. 您可以查看URL重写（如果使用的是IIS）或其他机制，在该机制下，服务器会理解它需要首先获取所有需要的JavaScript，然后导航到您提供的路由。

react-router中的URL参数问题

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-03-03 07:23:09

解决方案2
0 2018-03-03 07:11:01

react-router中的URL参数问题

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-03-03 07:23:09

解决方案2 0 2018-03-03 07:11:01

解决方案1
1 已采纳 2018-03-03 07:23:09

解决方案2
0 2018-03-03 07:11:01