reactjs - 使用 react-router 构建不显示我的应用程序(空白页面)
问题描述
我构建了我的应用程序,但屏幕上没有任何内容。
我使用 react-router 作为我的页面之间的路径,但没有显示任何内容......
我的应用程序需要位于子文件夹中:文件夹/子文件夹/子文件夹作为主链接。
我不知道我错在哪里
这是我的路线:
<Router basename="/">
<div>
<Route exact path="/" component={App}/>
<Route path="/scene01" component={Scene01}/>
</div>
</Router>
我的 package.json:
"name": "impermo",
"version": "0.1.0",
"private": true,
"homepage": "/folder/subfolder/subfolder/",
"dependencies": {
"@material-ui/core": "^4.9.12",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
解决方案
您需要添加一个Switch
来自react-router
A
<Switch>
查看它的 children<Route>
并呈现与当前 URL 匹配的第一个。
<Router basename="/">
<Switch>
<Route exact path="/" component={App}/>
<Route path="/scene01" component={Scene01}/>
</Switch>
</Router>
推荐阅读
- python - 如何获取 scipy.ndimage gaussian_filter 的值列表?
- git - 如何创建一个 bash 脚本,该脚本将使用 OAUTH 令牌列出 github 上的所有私有存储库?
- spring-batch - 弹簧批处理
- sql - 如何查找两个表中都存在的记录以及左表中的所有记录?
- django - 我们可以在 SerializerMethodField 的字段上应用 django 排序吗
- javascript - 如何在 NPM 上嵌套 GitHub 包?
- ios - 创建一个无限循环的 UIPageViewController
- python - 按任意一组键分组,并对字典列表中任意一组不同键进行求和
- c# - 为什么扩展方法需要是静态的?
- javascript - 适配一个iframe的高度让滚动条不出现或者直接修改滚动条的美观度