[英]issue with how to render with react router
I have this specific case where if the user routes to say topics/rendering, I need to show him a seperate Component and when user routes to topics/10, I need to show him another Component. 我有这个特定的情况,如果用户路由说主题/渲染,我需要向他显示一个单独的组件,当用户路由到主题/ 10时,我需要向他显示另一个组件。 The problem I am facing right now is that even when I do topics/rendering, I see both of the components being rendered on screen. 我现在面临的问题是即使我做主题/渲染,我也看到两个组件都在屏幕上呈现。 Also when user routes to topics/math/10, I need to route him to a different page. 此外,当用户路由到topics / math / 10时,我需要将他路由到另一个页面。
Here is the routing part in my App.js (default App.js) 这是我的App.js中的路由部分(默认App.js)
<div className="App">
<Router>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route exact path="/topics" component={Topics} />
<Route exact path ="/topics/rendering" component={Description}/>
<Route exact path="/topics/:id" component={Topic} />
<Route path="/topics/:description/:id" component={TopicExtended}/>
</Router>
</div>
You want to wrap the Route
components in a Switch
component so that only one of them will be rendered at a time. 您希望将Route
组件包装在Switch
组件中,以便一次只渲染其中一个组件。
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
<Route path="/topics/rendering" component={Description} />
<Route path="/topics/:id" component={Topic} />
<Route path="/topics/:description/:id" component={TopicExtended} />
</Switch>
</Router>
</div>
you should put Route tags inside Switch tag 你应该在Switch标签内放置Route标签
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
<Route path ="/topics/rendering" component={Description}/>
<Route path="/topics/:id" component={Topic} />
<Route path="/topics/:description/:id" component={TopicExtended}/>
</Switch>
</Router>
but import it first import {Switch} from 'react-router-dom'
但是import {Switch} from 'react-router-dom'
导入它首先import {Switch} from 'react-router-dom'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.