reactjs 除了根url之外,React-router“无法获取/*”

d8tt03nd  于 2023-02-08  发布在  React
关注(0)|答案(7)|浏览(159)

我愿意为我的应用程序使用React-router,我首先尝试了文档中给出的示例,我复制了下面的内容。现在当我转到localhost:3000/时,我看到了预期的“App”,但每隔一页,例如localhost:3000/inbox,都会返回“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>
);
vngu2lb8

vngu2lb81#

如果您使用的是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.js.org/configuration/dev-server/
Github上的webpack-dev-server文档:https://github.com/webpack/webpack-dev-server

wixjitnu

wixjitnu2#

我认为问题在于您正在进行http资源请求:

GET /inbox HTTP/1.1
Host: localhost:3000

但只使用客户端路由。您是否也打算进行服务器端渲染?您可能需要将路由器位置更改为HistoryLocation,而不是HashLocation(默认值)。
Router.run的位置属性告诉它在哪里匹配路由。如果你没有运行服务器端的React,我相信你必须使用Router.HashLocation(或者干脆把它留空)。
如果没有,您访问组件的方式是错误的。请尝试使用http://localhost:3000/#/inbox。熟悉React-Router可能需要一点时间,但绝对值得!
React路由器文档-哈希位置

vpfxa7rd

vpfxa7rd3#

最简单的选项:我使用哈希历史代替。网址停留不是很好,如果你需要更好的搜索引擎优化,我会选择服务器端渲染以及。
如果你对此感兴趣,这个答案对我很有帮助:React-router urls don't work when refreshing or writting manually

o4hqfura

o4hqfura4#

请求将被发送到服务器,而目录/文件并不存在,所以它将返回404,所以你必须告诉服务器返回所有请求的索引页,react将处理根:
如果您像我一样,将Reactor应用程序托管在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错误。

swvgeqrz

swvgeqrz5#

我遇到了同样的问题,如果你有一个服务器,响应请求和HashRouter,如果你使用静态文件服务器。而不是使用BrowserRouter使用HashRouter它不是完美的修复,但应该解决无法获得"/路径"错误。一定要导入HashRouter从'react-router-dom'

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

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

c2e8gylq

c2e8gylq6#

为了补充那些没有得到答案的人:historyApiFallback: true只适用于url的第一级,所以site.com/about会被重定向到index,而site.com/about/me不会,在这种情况下,需要添加rewrite选项:

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

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

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

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

f5emj3cl

f5emj3cl7#

我也遇到了同样的问题。使用webpack-dev-server很好,但使用express不行。问题出在Express.js版本中。我没有注意到它是beta(5.0.0-beta.1)
解决方案是升级/降级到稳定版本(4.18.2工作正常)。
希望能有所帮助!

相关问题