Question

我愿意为我的应用程序使用React-router，我首先尝试the example given in the doc，我在下面复制了它。现在，当我转到localhost:3000/时，我会看到“App”按预期方式，但每个其他页面（例如localhost:3000/inbox）都会返回“无法获取/收件箱”。我在这里缺少什么？

var About = React.createClass({
  render: function () {
    return <h2>About</h2>;
}});

var Inbox = React.createClass({
  render: function () {
    return <h2>Inbox</h2>;
}});

var App = React.createClass({
  render () {
    return (
      <div><h1>App</h1>
        <RouteHandler/>
      </div>
)}});

var routes = (
  <Route path='/' handler={App}>
    <Route path="about" handler={About}/>
    <Route path="inbox" handler={Inbox}/>
  </Route>
);

Answer 1

如果您使用的是webpack-dev-server，则会有一个名为history-api-fallback的选项。如果设置为true 404s将回退到/index.html。

将选项添加到Webpack配置的devServer部分，如下所示：

devServer: {
    contentBase: 'app/ui/www',
    devtool: 'eval',
    hot: true,
    inline: true,
    port: 3000,
    outputPath: buildPath,
    historyApiFallback: true,
},

链接到Webpack文档：https://webpack.github.io/docs/webpack-dev-server.html

Answer 2

我认为问题在于您正在发出http资源请求：

GET /inbox HTTP/1.1
Host: localhost:3000

但仅使用客户端路由。您是否打算进行服务器端渲染？您可能需要将路由器位置更改为HistoryLocation而不是HashLocation（默认值）。

Router.run的位置道具告诉它匹配路线的位置。如果你没有运行服务器端React，我相信你必须使用Router.HashLocation（或者只是留空）。

如果没有，您将以错误的方式访问您的组件。尝试使用http://localhost:3000/#/inbox。可能需要一点熟悉React-Router，但绝对值得！

React Router Documentation - HashLocation

Answer 3

最简单的选项：改为使用哈希历史记录。网址保持不是很好，如果你需要更好的SEO，我也会选择服务器端渲染。

如果您对此有详细的兴趣，这个答案对我很有帮助：React-router urls don't work when refreshing or writting manually

Answer 4

请求将被发送到服务器，并且目录/文件实际上不存在因此它将返回404，因此您必须告诉服务器返回所有请求的索引页面，并且react将处理root权限：

如果像我一样，你在IIS上托管你的反应应用程序，只需添加一个包含以下内容的web.config文件：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

这将告诉IIS服务器将主页面返回到客户端而不是404错误。

Answer 5

如果您有一个响应请求的服务器，以及一个HashRouter（如果您使用的是静态文件服务器），我也会遇到相同的问题。与其使用BrowserRouter，不使用HashRouter，它不是完美的解决方法，但应解决无法获取“ / path”的错误。确保从“ react-router-dom”导入HashRouter

render() {
    return (
        <div>
            <HashRouter>
                <Blog />
            </HashRouter>
        </div>
    );
}

来源：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/basic-components.md

Answer 6

添加到那些没有得到答案帮助的内容：historyApiFallback: true 仅适用于 url 的第一级。所以 site.com/about 将被重定向到索引，但 site.com/about/me 不会。在这种情况下，您需要添加 rewrite 选项：

historyApiFallback: {
  rewrites: [
    { from: /./, to: '/index.html' }
  ]
}

这将使用正则表达式匹配所有路由。还要注意添加以下内容：

  output: {
    // ...
    publicPath: '/'
    //...
  },

否则，重定向将工作到 index.html，但 index.html 可能只有 bundle.js 作为 webpacked 脚本，并且无法正确读取。它应该是 '/bundle.js'，这个配置选项会这样做。

React-router“无法GET / *”，但根网址除外

6 个答案: