issue with how to render with react router

Question

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. 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.

Here is the routing part in my App.js (default 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>

use <Switch> to render only the first matching route reacttraining.com/react-router/web/api/Switch — UjinT34
– UjinT34, Commented Mar 16, 2019 at 13:17

Tholle · Accepted Answer · 2019-03-16 13:17:34Z

3

You want to wrap the Route components in a Switch component so that only one of them will be rendered at a time.

<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>

answered Mar 16, 2019 at 13:17

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ilia · Accepted Answer · 2019-03-16 13:20:24Z

0

you should put Route tags inside Switch tag

<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'

edited Mar 16, 2019 at 13:20

answered Mar 16, 2019 at 13:17

ilia

3398 silver badges24 bronze badges

Collectives™ on Stack Overflow

issue with how to render with react router

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related