React Router 只渲染一条路由
React Router only rendering one route
我是 React 和 react-router-dom 的新手。我现在已经花了几个小时,但我只是遇到了死胡同。
我正在为 css 使用 create-react-app 和 bulma。我的依赖项:
"dependencies": {
"bulma": "^0.7.1",
"font-awesome": "^4.7.0",
"node-sass-chokidar": "^1.3.3",
"react": "^16.5.2",
"react-bulma-components": "^2.1.0",
"react-dom": "^16.5.2",
"react-fontawesome": "^1.6.1",
"react-router-dom": "4.3.1",
"react-scripts": "2.0.4"
},
我查看了所有关于 Whosebug、create-react-app 文档的相关问题,并在他们的 repo 中搜索了他们未解决的问题部分,用谷歌搜索了每个可能的关键字。我很茫然。
我的路由器只会呈现一条路线(Homeroute)。
如何让它也显示“/create”路由?
我试过:
- 'exact' 和 'strict' 属性的组合
- 用 包裹了
或 之后的所有内容
- 尝试了将
和 都(取消)包裹起来
同时尝试了 BrowserRouter 和 HashRouter
import React, { Component } from "react";
import { Switch, Route, NavLink, BrowserRouter, HashRouter } from "react-router-dom";
const Home = () => {
return (<h2>This is Home</h2>);
}
const Create = () => {
return (<h2>This is Create page</h2>);
}
class App extends Component {
render() {
return (
<HashRouter>
<div>
<Navigation />
<div className="section">
<Switch>
<Route path="/" exact component={Home} />
<Route path="/create" exact Component={Create} />
</Switch>
</div>
<Footer />
</div>
</HashRouter>
);
}
}
export default App;
结果:"This is Home"
预计:"This is Home"
URL: http://localhost:3000/#/create
URL: http://localhost:3000/#/create/
结果:无
预计:"This is Create page"
打错了。注意字母 "C",它应该是小写的。
进行更改,来自
<Route path="/create" exact Component={Create} />
至
<Route path="/create" exact component={Create} />
我是 React 和 react-router-dom 的新手。我现在已经花了几个小时,但我只是遇到了死胡同。
我正在为 css 使用 create-react-app 和 bulma。我的依赖项:
"dependencies": {
"bulma": "^0.7.1",
"font-awesome": "^4.7.0",
"node-sass-chokidar": "^1.3.3",
"react": "^16.5.2",
"react-bulma-components": "^2.1.0",
"react-dom": "^16.5.2",
"react-fontawesome": "^1.6.1",
"react-router-dom": "4.3.1",
"react-scripts": "2.0.4"
},
我查看了所有关于 Whosebug、create-react-app 文档的相关问题,并在他们的 repo 中搜索了他们未解决的问题部分,用谷歌搜索了每个可能的关键字。我很茫然。
我的路由器只会呈现一条路线(Homeroute)。
如何让它也显示“/create”路由?
我试过:
- 'exact' 和 'strict' 属性的组合
- 用 包裹了
或 之后的所有内容 - 尝试了将
和 都(取消)包裹起来 同时尝试了 BrowserRouter 和 HashRouter
import React, { Component } from "react"; import { Switch, Route, NavLink, BrowserRouter, HashRouter } from "react-router-dom"; const Home = () => { return (<h2>This is Home</h2>); } const Create = () => { return (<h2>This is Create page</h2>); } class App extends Component { render() { return ( <HashRouter> <div> <Navigation /> <div className="section"> <Switch> <Route path="/" exact component={Home} /> <Route path="/create" exact Component={Create} /> </Switch> </div> <Footer /> </div> </HashRouter> ); } } export default App;
结果:"This is Home"
预计:"This is Home"
URL: http://localhost:3000/#/create
URL: http://localhost:3000/#/create/
结果:无
预计:"This is Create page"
打错了。注意字母 "C",它应该是小写的。
进行更改,来自
<Route path="/create" exact Component={Create} />
至
<Route path="/create" exact component={Create} />
- 尝试了将