Question

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

当我在呈现图书清单的主页组件上并点击链接以获取特定图书时，页面正确加载...

但是当我刷新页面时，会出现404 - 找不到页面错误

（我使用react-router v4，Node v6.11.1，Express v4.15.2）

反应路由器设置：

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

如果您在webpack-dev-server
上撰写webpack.config.js配置
您应该在您的webpack配置中将此historyApiFallback: true添加到devServer。

这将在404时返回index.html。

devServer: { ... historyApiFallback: true }
如果您只使用cli，请执行此操作

webpack-dev-server --history-api-fallback
如果您使用节点明确server.js，请参阅here

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

对不起。我在手机上写这个。

React路由器无法在页面刷新后找到页面

1 个答案: