React-router "Cannot GET /*" 除了 root url

Question

我愿意为我的应用程序使用 React-router，我正在尝试 the example given in the doc，我在下面复制了它。现在，当我转到 localhost:3000/ 时，我会按预期看到 "App"，但每隔一页，例如 localhost:3000/inbox returns "Cannot GET /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

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

GET /inbox HTTP/1.1
Host: localhost:3000

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

Router.run 的 location 属性告诉它在哪里匹配路由。如果您不是运行服务器端 React，我相信您必须使用 Router.HashLocation （或者将其留空）。

如果不是，则说明您访问组件的方式有误。尝试使用 http://localhost:3000/#/inbox。熟悉 React-Router 可能需要一点时间，但这绝对值得！

React Router Documentation - HashLocation

Answer 2

最简单的选项：改用哈希历史记录。保留的网址不是很好，如果您需要更好的 SEO，我也会选择服务器端呈现。

如果您对此有兴趣，这个答案对我很有帮助：

Answer 3

如果您使用 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,
},

Link 到 Webpack 文档：https://webpack.js.org/configuration/dev-server/

webpack-dev-server Github 上的文档：https://github.com/webpack/webpack-dev-server

Answer 4

请求将发送到服务器，directory/file并不真正存在所以它会return404，所以你必须告诉服务器return索引所有请求的页面，反应将处理生根：

如果像我一样，您正在 IIS 上托管您的 React 应用程序，只需添加一个包含 :

的 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 服务器 return 客户端的主页而不是 404 错误。

Answer 5

我遇到了同样的问题，如果你有一个响应请求的服务器和一个 HashRouter，如果你使用的是静态文件服务器。而不是使用 BrowserRouter 使用 HashRouter 它不是完美的修复，但应该解决 cannot GET "/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 "Cannot GET /*" 除了 root url

React-router "Cannot GET /*" except for root url

reactjs

react-router