页面刷新后反应路由器找不到页面[重复]

Question

我的应用程序正在显示书籍列表，其中包含指向该书详细信息页面的链接。

当我在呈现图书列表的主组件上并单击链接以访问特定图书时，页面正在正确加载...

但是当我刷新页面时，出现 404 - Page not found 错误

（我正在使用 react-router v4、Node v6.11.1、Express v4.15.2）

React 路由器设置：

import { BrowserRouter as Router  } from 'react-router-dom'
import { Switch, Route } from 'react-router-dom'

class App extends Component {
    render() {
        return (
            <div>
                <MyNavbar/>
                <div style={{paddingTop: "5rem"}}>
                    <Switch>
                        <Route exact path='/' component={Home}/>
                        <Route path='/book/:id' component={BookPage}/>
                    </Switch>
                </div>
            </div>
        )
    }
}

ReactDOM.render((
    <Router>
        <App />
    </Router>
), document.getElementById('root'))

这是我的 webpack 配置：

var webpack = require('webpack')
var path = require('path')

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        filename: 'public/dist/bundle.js',
        sourceMapFilename: 'public/dist/bundle.map.js'
    },
    devtool: '#source-map',
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.js?$/,
                exclude: /(node_modules)/,
                query: {
                    presets: ['react', 'es2015']
                }
            }, {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ]
            },
            {
                test: /\.(png|jpg|)$/,
                loader: 'url-loader?limit=200000&name=./imgs/[hash].[ext]'
            }
        ]
    },
}

Answer 1

这是doc~

如果你使用webpack-dev-server

1. 如果您在webpack.config.js 上编写webpack-dev-server 配置

   您应该在 webpack 配置中将此 historyApiFallback: true 添加到 devServer。

   这将在 404 时返回 index.html。

   devServer: { ... historyApiFallback: true }

2. 如果您只使用cli，请执行此操作

   webpack-dev-server --history-api-fallback

3. 如果你使用节点快递server.js，见here

如果是生产，你可以编辑服务器配置，发出每个请求，返回 index.html，当然，排除静态文件和 api 请求~

对不起。我在手机上写的。