react-router“无法获取 /*”，除了根 url

IT技术 reactjs react-router
2021-04-18 19:13:13

我愿意为我的应用程序使用 React-router，我首先尝试文档中给出的示例，我在下面复制了该示例。现在，当我转到 时localhost:3000/，我会按预期看到“应用程序”，但所有其他页面，例如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>
);
6个回答

如果您正在使用webpack-dev-server，则有一个名为history-api-fallback. 如果设置为true404s 将回退到/index.html.

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

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

这应该是经过验证的答案！多谢 ！
2021-05-27 19:13:13
这是问题的正确解决方案
2021-05-30 19:13:13
谢谢，这就是答案！
2021-06-14 19:13:13

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

GET /inbox HTTP/1.1
Host: localhost:3000

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

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

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

React 路由器文档 - HashLocation

这在 v2.x 中已经过时了。尝试在此处允许：github.com/reactjs/react-router/blob/master/docs/guides/...
2021-06-02 19:13:13
我有一个 Apache 实例，它在 localhost:3000 处为我的前端提供服务，并且那里的 index.html 包含 React.js 代码。如果它有任何意义。我还有一个在 :8000 处提供的 Python 后端，但我认为它无关紧要。
2021-06-05 19:13:13
所以基本上，当你点击 /index 时，Apache 服务器正在寻找另一个资源来启动，而不是保留在 index.html 文件中。您需要更改您router.Run的使用Router.HashLocation，然后点击 /#/inbox （提供相同的 index.html 文档）。
2021-06-09 19:13:13
你在服务器上运行 React 吗？或者你只是在一个基本的 index.html 文件上安装 React？
2021-06-13 19:13:13
感谢您的回答。我在打电话Router.run(routes, Router.HistoryLocation, function (Handler, state) {...}，我不知道 HashLocation。我所需要的只是显示不同的文本，具体取决于我在“/”之后添加的名称（例如，“/inbox”）。/#/ 返回的内容与我在其后放置的内容相同（即 '/#/inbox' 被视为与 '/' 相同并显示 'App':state.params是一个空对象）。
2021-06-18 19:13:13

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

如果您对此感兴趣，这个答案对我真的很有帮助：React-router urls 在手动刷新或写入时不起作用

请求将被发送到服务器，目录/文件并不真正存在所以它会返回 404，所以你必须告诉服务器返回所有请求的索引页面，react 将处理生根：

如果像我一样，您在 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 服务器将主页而不是 404 错误返回给客户端。

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

其它你可能感兴趣的问题
上一篇React-redux 组件不会在商店状态更改时重新渲染 下一篇导航后不调用`componentDidMount()`函数