反应路由器只显示主要路线

Question

我正在使用 React router dom 版本 5.0.1 作为一个简单的 React 应用程序，我使用 rollup 进行捆绑，这是我的路由器组件

      return(
            <Router>
                <Switch>
                <Route path='/'       component={Main} />
                <Route path='/hello'  component={Hello} />
                <Route path='/login'   component={Login} />
                </Switch>
            </Router>
    )

问题是它只显示 localhost:8000/ 的主要路线，但是当我尝试访问 localhost:8000/hello 或 localhost:8000/login 时，它给了我这个错误

    404 Not Found

    C:\Users\omar_\Desktop\form-builder\form-builder\frontend\public\hello

    (rollup-plugin-serve)

这是我的 rollup.config

    import babel from "rollup-plugin-babel";
    import resolve from 'rollup-plugin-node-resolve';
    import commonjs from 'rollup-plugin-commonjs';
    import replace from 'rollup-plugin-replace';
    import serve from 'rollup-plugin-serve'

    export default {
input: 'src/index.js',
plugins: [

    resolve({
        browser: true,
    }),
    commonjs({
        include: [
            'node_modules/**',
        ],
        exclude: [
            'node_modules/process-es6/**',
        ],
        namedExports: {
            'node_modules/react/index.js': ['Children', 'Component', 'PropTypes', 'createElement'],
            'node_modules/react-dom/index.js': ['render'],
            'node_modules/react-is/index.js': ['isValidElementType'],
        },
    }),
    babel({
        exclude: "node_modules/**",
    }),
    replace({
        'process.env.NODE_ENV': JSON.stringify('development'),
    }),
    serve('public')
],
output: {
    file: "public/bundle.js",
    format: "cjs",
    sourcemap: 'inline'
}

};

Answer 1

简答：

问题是 rollup-plugin-serve 服务器未配置为处理 404。客户端路由器会发生这种情况。

最有可能解决问题的两件事：

改变这个

    serve('public')

对此

    serve({ contentBase: 'public', historyApiFallback: true })

如果这不能解决问题，请检查 public 文件夹中的 index.html，因为问题可能是它没有引用 index.js 和一些其他资源从根。

例如：

<html>
  <head>
    <title>Application</title>
  </head>
  <body>
    <script src="/index.js"></script>
  </body>
</html>

请注意/index.js中的/，这很重要。如果你有它 relative(<script src="index.js"></script>) 它可能会导致 CSR 问题。

稍微长一点的回答：

客户端路由器 (CSR) 通过包装浏览器位置 api 来工作，您可以在它可以拦截的页面中创建特殊链接。

当你第一次加载页面时，通过在浏览器中输入 url，页面中还没有 javascript 运行，所以请求转到服务器，服务器必须知道这是一个前端页面和 return 根 html，即使在服务器端没有任何匹配的路由。

rollup-plugin-serve 中的 historyApiFallback: true 标志每次无法匹配 url.

在 index.html 中引用相关资源时，这可能会导致问题。例如：

一个调用端点/users/1
Rollup serve 无法为其找到资源，因此默认 returns index.html
index.html 引用亲戚 index.js <script src="index.js"></script>
浏览器尝试通过 /users/1/index.js
Rollup serve 找不到静态资源，默认 returns index.html

反应路由器只显示主要路线

react router only displaying main route

javascript

reactjs

react-router

react-router-dom

rollup