反应路由器只显示主路由答案

【问题标题】：react router only displaying main route反应路由器只显示主路由
【发布时间】：2019-10-24 20:01:03
【问题描述】：

我正在使用 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'
}

};

【问题讨论】：

您是否在文件顶部导入 Hello 和 Login 组件？
是的，我确定我从正确的路径导入它们，我尝试更改主路径的组件@路径：“/”，它适用于所有 imorted 组件

标签： javascript reactjs react-router react-router-dom rollup

【解决方案1】：

简答：

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

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

改变这个

    serve('public')

到这里

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

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

例如：

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

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

略长一点的答案：

客户端路由器（CSRs）通过包装浏览器位置api来工作，您可以在页面中制作可以拦截的特殊链接。

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

rollup-plugin-serve 中的 historyApiFallback: true 标志将其配置为在每次无法匹配 url 时从公用文件夹返回 index.html 页面。

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

调用端点/users/1
Rollup serve 找不到资源，所以默认返回 index.html
index.html 引用了一个相对的 index.js <script src="index.js"></script>
浏览器尝试通过获取/users/1/index.js 来获取资源
Rollup serve 找不到静态资源，默认返回 index.html

【讨论】：