在 react-router 中路由嵌套 url答案

【问题标题】：routing nested url in react-router在 react-router 中路由嵌套 url
【发布时间】：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 时会发生什么？

标签： reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：