React Router 路由无法从 URL 工作

Question

我有一个具有以下路线的应用程序：

export default class Content extends Component {
    constructor() {
        super();
    }
    render() {
        return (
            <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route path='/restaurant/:id' component={Restaurant}/>
                    <Route path='/admin' component={Admin}/>
            </Switch>
        )
    }
}

路线在应用程序中运行良好。例如，如果我运行我的 live-server 命令，它会在http://127.0.0.1:8080/ 中弹出并运行路由。从那里我可以单击一个链接并带我到其他路线。但是，如果我尝试通过 url 去那里，它会给我一个“无法获取/路由”错误。

当我尝试在这些路由上进行表单提交时，这是一个问题，因为重定向到其自身不再起作用。

我正在使用 webpack 并阅读了与它有关的内容，但没有找到解决方案。

这是我的 webpack：

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

module.exports = {
    entry: [
        './src/app.jsx', './src/sass/main.scss', './src/index.js'
    ],
    output: {
        path: __dirname + "/src",
        filename: 'bundle.min.js',
    },
    plugins: [
        new webpack.DefinePlugin({ // <-- key to reducing React's size
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        })
        // new webpack.optimize.UglifyJsPlugin(), //minify everything new
        // webpack.optimize.AggressiveMergingPlugin(), //Merge chunks
    ],
    watch: true,
    module: {
        loaders: [{
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        }, { // regular css files
            test: /\.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
        }]
    }
};

我没有使用任何服务器，这是我第一次使用路由，所以我很困惑。我使用 live-server 来部署我的 react 应用程序和 webpack 来构建和捆绑我的 scss 和 jsx 等。

感谢您的帮助！

Answer 1

在集成 react-router 之前，您需要配置您的备用网址：因此，如果您使用 webpack 为您的应用程序提供服务，请将以下内容添加到您的 webpack 配置中：

devServer: {
  historyApiFallback: true
}

在 React 应用程序中，通常您会将 <Route /> 包装在 <Router /> 中，这样当 URL 更改时，<Router /> 将匹配其路由的一个分支，并呈现其配置的组件。执行以下操作：

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

export default class Content extends Component {
 constructor() {
   super();
 }
 render() {
  return (
    <Router>
      <div>
        <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/restaurant/:id' component={Restaurant}/>
            <Route path='/admin' component={Admin}/>
        </Switch>
      </div>
    </Router>
)}
}

Answer 2

对于开发环境，您需要设置 webpack-dev-server 来处理您的反应路线，将其安装到您的依赖项中。

那么在package.jsonscripts部分启动脚本应该是这样的：

"scripts": {
   "start": "webpack-dev-server --watch"
}

然后在 webpack 配置对象的根目录下设置 devServer：

devServer: {
  hot: true,
  contentBase: './',
  historyApiFallback: true
},

对于生产，您需要编写自己的 ssr 或使用任何 ssr 库，例如 next.js

Answer 3

在这样的应用程序（仅前端）中，问题是浏览器无法处理 /any-route，因为它们不存在，因此它返回您看到的错误。

要解决这个问题，开发工具中有一些选项，例如 live-server 中的 entry-file。

根据它的描述，它应该可以完成这项工作。

--entry-file=PATH - serve this file (server root relative) in place of missing files (useful for single page apps)