Reactjs 反应路由器“；无法获取/*"；除了根url

我愿意在我的应用程序中使用React路由器，我正在首先尝试，我在下面复制了它。现在，当我转到

localhost:3000/

时，我看到了预期的“App”，但每隔一页，例如

localhost:3000/inbox

就会返回“无法获取/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>
);

var About=React.createClass({
渲染：函数（）{
返回大约；
}});
var Inbox=React.createClass({
渲染：函数（）{
返回收件箱；
}});
var App=React.createClass({
渲染（）{
返回(
应用程序
)}});
变量路由=(
);

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

GET /inbox HTTP/1.1
Host: localhost:3000

但是我们只使用客户端路由。您是否也打算进行服务器端渲染？您可能需要将路由器位置更改为

HistoryLocation

，而不是

HashLocation

（默认设置）

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

如果没有，则表示您以错误的方式访问组件。尝试使用
http://localhost:3000/#/inbox
。可能需要一点时间熟悉React路由器，但绝对值得

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

如果您对这方面的细节感兴趣，这个答案对我真的很有帮助：
如果您使用的是
webpack dev server
，则有一个名为
history api fallback
的选项。如果设置为
true
404s，则返回到
/index.html

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

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

链接到网页包文档：
请求将被发送到服务器，而目录/文件实际上并不存在，因此它将返回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。这不是一个完美的解决方案，但应该可以解决“无法获取”/“路径”错误。确保从“react router dom”导入HashRouter

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

render（）{
返回(
);
}

来源：
谢谢你的回答。我正在调用
Router.run（routes，Router.HistoryLocation，function（Handler，state）{…}
，我不知道HashLocation。我所需要的只是根据我在“/”后面添加的名称显示不同的文本（例如，“/inbox”）。无论我在它后面放什么，它都会返回相同的内容（即，“/#/inbox”被视为与“/”相同，并显示“App”：
状态。params
为空对象）.你是在服务器上运行React？还是只是在一个基本index.html文件上安装React？我有一个Apache实例，它在localhost:3000上为我的前端服务，那里的index.html包含React.js代码。如果有意义的话。我也有一个Python后端服务于：8000，但我想它是不相关的。所以基本上，当你点击/index时，Apache服务器正在寻找另一个要打开的资源，而不是保留index.html文件。您需要更改
路由器。运行
以使用
路由器。HashLocation
，然后点击/#/inbox（提供相同的index.html文档）。这与v2.x已过时。请尝试以下操作：这应该是经过验证的答案！非常感谢！这是问题的正确解决方案谢谢，这是答案！