Question

我开始使用react-router v4。我的app.js中有一个简单的<Router>，带有一些导航链接（请参阅下面的代码）。如果我导航到localhost/vocabulary，路由器会将我重定向到正确的页面。但是，当我之后按下重新加载（F5）（localhost/vocabulary）时，所有内容都会消失，浏览器报告Cannot GET /vocabulary。怎么可能？有人能告诉我如何解决这个问题（正确地重新加载页面）吗？

App.js：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { Switch, Redirect } from 'react-router'
import Login from './pages/Login'
import Vocabulary from './pages/Vocabulary'

const appContainer = document.getElementById('app')

ReactDOM.render(
  <Router>
    <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/vocabulary">Vocabulary</Link></li>
        </ul>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/vocabulary" component={Vocabulary} />
        </Switch>
    </div>
  </Router>,
appContainer)

Answer 1

我假设你正在使用Webpack。如果是这样，在webpack配置中添加一些内容应该可以解决问题。具体而言，-r和lsoft | grep nodebb。这是一个示例webpack配置，下面使用^并修复了我的刷新问题。如果您有点好奇，为什么＆＃34;，this会有所帮助。

$> gcloud compute backend-services update BACKEND_SERVICE_NAME --enable-cdn

我在这里写了更多关于此的内容 - Fixing the "cannot GET /URL" error on refresh with React Router (or how client side routers work)

Answer 2

只是为那些仍在努力解决这个问题的人补充泰勒的答案：

将devServer.historyApiFallback: true添加到我的webpack配置（不设置publicPath）修复了我在刷新/返回/转发时看到的404 / Can not-GET错误，但仅限于单级嵌套路由。换句话说，“/”和“/ topics”开始正常工作，但除此之外的任何事情（例如“/ topics / whatever”）仍然会刷新404等等。

刚刚在这里看到了接受的答案：Unexpected token < error in react router component它为我提供了最后一个缺失的部分。将前导/添加到我的index.html中的捆绑脚本src已完全解决了这个问题。

Answer 3

我遇到了同样的问题，为我修复的是编辑我的package.json文件，并在scripts: {下

"build": "webpack -d && copy src\\index.html dist\\index.html /y && webpack-dev-server --content-base src --inline --port 3000"

在我的webpack build代码的末尾，我添加了--history-api-fallback 这似乎也是Cannot GET /url错误

最简单的解决方案

注意：下次在添加--history-api-fallback后构建时，您会注意到输出中的一行看起来像这样（无论您的索引文件是什么）：

404s将回退到/index.html

Answer 4

如果您使用Webpack，请在部分服务器配置中检查您的配置 “contentBase”属性。您可以通过此示例进行设置：

devServer: {
    ...
    contentBase: path.join(__dirname, '../')
    ...
}

Answer 5

我遇到了同样的问题，但在停止并再次运行webpack后得到修复。

Answer 6

通过添加... historyApiFallback: true

devServer: {
        contentBase: path.join(__dirname, "public"),
        watchContentBase: true,
        publicPath: "/dist/",
        historyApiFallback: true
    }

Answer 7

如果您的应用程序托管在静态文件服务器上，则需要使用而不是。

https://github.com/ReactTraining/react-router/blob/v4.1.1/FAQ.md#why-doesnt-my-application-render-after-refreshing

Answer 8

如果您使用Express（不是Webpack），这对我有用。

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

Answer 9

它对我有用，只需要添加devServer { historyApiFallback: true }就可以了，不需要使用publicPath: '/'

用法如下：

  devServer: {
    historyApiFallback: true
  },

Answer 10

添加到已接受的答案中，如果您正在使用 HtmlWebpackPlugin 并且仍然出现错误，请仔细检查 filename 属性。如果您专门为生产设置 filename，那么您需要添加一个条件来设置 filename 变量的 WEBPACK_DEV_SERVER 条件。请看下面的例子：

new HtmlWebpackPlugin({
   template: './src/index.html',
   filename: process.env.WEBPACK_DEV_SERVER ? 'index.html' : PROD_HTML_PATH,
})

React-router v4 - 无法获取* url *

10 个答案: