在 react-router 中路由嵌套 url

Posted 2023-02-22

技术标签:

【中文标题】在 react-router 中路由嵌套 url【英文标题】：routing nested url in react-router 【发布时间】：2016-03-06 22:15:57 【问题描述】：

我的路线已定义，当我导航到products/new 时，工作正常，但如果刷新页面，他products/new 没有进入，他返回意外令牌。

路线配置。

<Router history=createBrowserHistory()>

<Route path="/" component=Layout>
   <IndexRoute component=Home />
   <Route path="produtos/novo" component=ProductsNew/>
   <Route path="produtos" component=Products />
</Route>

【问题讨论】：

您需要设置 .htaccess 或虚拟主机（如果您使用的是 Apache）将所有请求指向您的应用所在的索引页面。这个错误只出现在``` products/new ```，其他页面在刷新时正常。我的服务器是 node + express。您提供的代码中没有为products/new 设置路由。这可能是原因，虽然我需要更多信息来帮助你...... 这是我的服务器：

const express = require('express') const path = require('path') const port = process.env.PORT || 8000 const app = express()  // serve static assets normally app.use(express.static(__dirname + '/public'))  // handle every other route with index.html, which will contain // a script tag to your application's javascript file(s). app.get('*', function (request, response)   response.sendFile(path.resolve(__dirname, 'public', 'index.html')) )  app.listen(port) console.log("server started on port " + port)

当您导航到produtos/novo 时会发生什么？ 【参考方案1】：

我遇到了类似的问题，最终意识到这不是 React Router 的问题，而是我自己的路径问题。它正在加载相对于/produtos 而不是/ 的文件（与您的示例有关）。

我将<base href="/" /> 添加到我的index.html 的<head> 中并且它起作用了（：

【讨论】：

【参考方案2】：

有人问过类似的问题： Correct path for img on React.js

希望这会有所帮助。关键是您使用来自根目录的相对路径，即'/dir/assets/xxx.xx' 第一个起始/ 从根目录开始 URL 路径。

当您在本地工作时，例如@987654322@，甚至在您的网络上，例如@987654323@，这将是相同的

【讨论】：

以上是关于在 react-router 中路由嵌套 url的主要内容，如果未能解决你的问题，请参考以下文章

在 react-router v4 中嵌套路由

在带有 webpack 的 React-Router 中使用嵌套路由的问题