Question

我将React Router dom版本5.0.1用于一个简单的react应用，并且我使用汇总来捆绑，这是我的路由器组件

      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

简短答案：

问题在于汇总插件服务服务器未配置为处理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问题。

答案稍长一些：

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

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

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

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

有人呼叫端点/users/1
汇总服务无法为其找到资源，因此默认情况下会返回index.html
index.html引用了相对的index.js <script src="index.js"></script>
浏览器尝试通过获取/users/1/index.js来获取资源
汇总服务无法找到静态资源，并且默认情况下返回index.html

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

1 个答案: