react-router 中 URL 参数的问题
Issue with URL params in react-router
我一直在尝试按照 docs 使用 react-router 的 Router、Route 和 Switch 组件。
但我完全无法使 URL 参数正常工作。我可以让所有其他路线工作,但任何涉及 /:variable
的事情,我似乎无法工作。
从他们的文档中,他们有这段代码:
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>
我有这个:
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>
);
};
除 /resetpassword/:token
外,每个 component/route 都有效,我终究无法弄清楚原因。
当我转到 http://localhost:8000/resetpassword
时,它实际上向我显示了我的页眉组件。
当我转到 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)
谁能发现我的错误?
Here is a link 到我当前仓库中的这个文件,如果有帮助的话。
谢谢
此问题的一个原因可能如下
您正在尝试请求服务器为您获取 resetpassword/123 页面,但服务器并不知道它是什么。您正在使用 react-router 并在客户端设置路由。
当您第一次请求页面(可能是 localhost 8000)时,您将获得客户端所需的所有 javascript 文件。从那时起,如果你点击 link,反应路由器就会出现,它会检查客户端是否有任何匹配的路由并呈现适当的组件。即使在你的情况下,如果你直接有一个按钮说 'Reset Password' 并且在这里如果你说导航到 resetpassword 路线,它完美地工作。
如果您需要您的应用程序在 URL 被直接命中时也能正常工作,您可能应该让服务器也理解路由。您可以查看 URL 重写(如果您使用的是 IIS)或服务器了解它需要首先获取所有 javascript 然后导航到您提供的路由的其他机制。
您在 index.html
文件中使用相对路径包含脚本和 css 文件。改成绝对路径,像这样:
<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>
我一直在尝试按照 docs 使用 react-router 的 Router、Route 和 Switch 组件。
但我完全无法使 URL 参数正常工作。我可以让所有其他路线工作,但任何涉及 /:variable
的事情,我似乎无法工作。
从他们的文档中,他们有这段代码:
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>
我有这个:
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>
);
};
除 /resetpassword/:token
外,每个 component/route 都有效,我终究无法弄清楚原因。
当我转到 http://localhost:8000/resetpassword
时,它实际上向我显示了我的页眉组件。
当我转到 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)
谁能发现我的错误?
Here is a link 到我当前仓库中的这个文件,如果有帮助的话。
谢谢
此问题的一个原因可能如下
您正在尝试请求服务器为您获取 resetpassword/123 页面,但服务器并不知道它是什么。您正在使用 react-router 并在客户端设置路由。
当您第一次请求页面(可能是 localhost 8000)时,您将获得客户端所需的所有 javascript 文件。从那时起,如果你点击 link,反应路由器就会出现,它会检查客户端是否有任何匹配的路由并呈现适当的组件。即使在你的情况下,如果你直接有一个按钮说 'Reset Password' 并且在这里如果你说导航到 resetpassword 路线,它完美地工作。
如果您需要您的应用程序在 URL 被直接命中时也能正常工作,您可能应该让服务器也理解路由。您可以查看 URL 重写(如果您使用的是 IIS)或服务器了解它需要首先获取所有 javascript 然后导航到您提供的路由的其他机制。
您在 index.html
文件中使用相对路径包含脚本和 css 文件。改成绝对路径,像这样:
<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>