react路由器仅显示主路由
我使用的反应路由器dom版本5.0.1一个简单的反应应用程序，我使用了汇总捆绑，这是我的路由器组件
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/登录时，会出现此错误
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'
}
};
共有1个答案
简短回答：
问题是rollup-plugin-service服务器未配置为处理404s。客户端路由器会发生这种情况。
有两件事最有可能解决这个问题：
改变这个
serve('public')
对此
serve({ contentBase: 'public', historyApiFallback: true })
如果这不能解决问题，请检查公用文件夹中的index.html，因为问题可能是它没有引用index.js和来自root的其他一些资源。
ex：
<html>
<head>
<title>Application</title>
</head>
<body>
<script src="/index.js"></script>
</body>
</html>
请注意/index.js中的/，它很重要。如果您将其设置为相对（
稍长的回答：
客户端路由器（CSRs）通过包装浏览器位置api工作，您可以在页面中创建特殊链接，它可以拦截。
当你第一次加载页面时，通过在浏览器中键入url，页面中还没有运行javascript，所以请求转到服务器，服务器必须知道这是一个前端页面，并返回根html，即使没有任何在服务器端匹配路由。
rollup plugin service中的historyApiFallback:true标志将其配置为每次无法匹配url时都从公用文件夹返回index.html页面。
在index.html.中引用相对资源时，这可能会导致问题。例如：
一个调用endpoint/users/1- 汇总服务找不到资源，因此默认情况下返回index.html
- index.html引用相对index.js
-
我使用React路由器的SPA，但我不确定如何显示索引路由"/"上的一些内容。 我的顶级路由器配置只是： 顶层组件呈现页眉/页脚和其他公共元素： 子路由工作正常，它们在应用程序组件中呈现。但是，如何在根路径上呈现某些内容，使其不只是一个空白页面？
-
大家好，我不知道发生了什么事。我有以下路线： 只有路径为“/”的路由和路径为“/patient/：id”的路由才有效，其他3条路由只是没有显示与路径对应的组件。 这就是我进入路线的方式。我有一个标题组件，上面有正确的链接。见下文 在头组件中，我从'react router dom'导入{Link}；在我声明路由的文件中，我从'react router dom'导入{BrowserRouter，Ro
-
如果我将路由折叠起来，这样看起来就像： 工作很好。我嵌套的原因是因为我将在“dashboard”下有多个子项，并且希望它们都在URL中以为前缀。
-
react&React-Router的新功能。我正在使用react-router-4 我有以下组件-login-home-header-sidebar-content 登录组件没有标题或侧栏。 这就是我的路由 应用程序JS 然后在我的Home组件中，我有侧边栏和内容。 home.js呈现方法 侧边栏组件有一个链接，该链接具有“to”值“/home/dashboard”。 不幸的是，这并不奏效。单击
-
使用redux和反应路由器，我想访问路由指定的组件以外的组件上的路由参数。 我已经对react-router、redux和react-router-redux进行了如下设置，我想从我的redux存储访问reportId参数。 我已经尝试连接react-redux路由器来存储路由状态，但是我发现除了活动路由的完整路径之外，redux内部没有任何有用的存储。这让我可以选择从redux中的路径解析出re
-
我是一个新的反应和反应。我已经花了几个小时了，我只是走到了死胡同。 我正在使用CreateReact应用程序和用于css的bulma。我的依赖项： }， 我查看了stackoverflow的所有相关问题，创建了react应用程序文档，并在他们的回购协议中搜索了他们的开放问题部分，谷歌搜索了所有可能的关键字。我不知所措。 我的路由器只会呈现一个路由（Homeroute）。 如何让它显示/创建路线？