反应路由器只显示主路由
Posted
技术标签:
【中文标题】反应路由器只显示主路由【英文标题】：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 组件 【参考方案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
【讨论】：
以上是关于反应路由器只显示主路由的主要内容，如果未能解决你的问题，请参考以下文章