React-Router v4-无法获取*URL*

Question

我开始使用React-RouterV4。我的app.js中有一个简单的 和一些导航链接（参见下面的代码）。如果导航到localhost/v词汇，router会将我重定向到右侧页面。但是，当我之后按reload(F5)（localhost/v词汇表)时，所有内容都会消失，浏览器报告无法获取/v词汇表。这怎么可能？有人能给我任何线索如何解决（重新加载正确的页面）？

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配置中添加一些内容应该可以解决这个问题。具体而言，output.publicpath=“/”和devserver.historyapifallback=true。下面是一个示例webpack配置，它同时使用了^，并为我修复了刷新问题。如果你好奇“为什么”，这会有帮助。

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

我在这里写了更多关于这个的内容--修复React Router刷新时的“无法获取/URL”错误（或者客户端路由器的工作方式）