score:3
Accepted answer
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>
score: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'
Source: stackoverflow.com
Related Query
- issue with how to render with react router
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- How to 1). put a div , 2). render a component without Route inside <Routes> with React Router in v6 React?
- React Router v6 : How to render multiple component inside and outside a div with the same path
- How to render different component with react router after user logged in
- With React Router : How to render a component multiple times with differents props each time in a Route?
- How to render components dynamically based on route name with React router
- How to use React Router with Electron?
- How to fetch the new data in response to React Router change with Redux?
- React JSX, how to render text with a single quote? Example <p>I've</p>
- How to focus something on next render with React Hooks
- How to mock history.push with the new React Router Hooks using Jest
- How to redirect from axios interceptor with react Router V4?
- How to let react router respond with 404 status code?
- How to use React Router with Laravel?
- How to configure webpack dev server with react router dom v4?
- How to generate sitemap with react router
- How to use context api with react router v4?
- How to make react router work with static assets, html5 mode, history API and nested routes?
- React Hooks with React Router v4 - how do I redirect to another route?
- How to render images with react on server side?
- React Router with - Ant Design Sider: how to populate content section with components for relevant menu item
- How to configure Nginx with React Router HistoryLocation?
- How to render a string with JSX in React
- How to pass the match when using render in Route component from react router (v4)
- How to use React Router with Preact
- How to render images with React JS using map or loop?
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- How to handle React Router with Node Express routing
- How to dispatch actions on location change with react router v4
More Query from same tag
- Reactjs Redux updating data values from the state/store with an input
- How apply ellipsis to title in Material UI CardHeader
- React Transition Group - Magnetic slider (change direction not working correctly)
- Split a string with HTML <br> tag into multiline string
- Confirm remote sync - Firebase Realtime Database w/ ReactJS+Redux+Saga
- Webpack fails when run through npm run
- Object's data missing when passing to Meteor.call
- Cannot mount dispatch to props with connect()
- How to use justify content property in react native?
- Implementing Lodash's debounce in a ReactJS functional component
- Why is my array not updated in the state in React?
- Background image flashes when changed via state
- React JS: Component Not Exported
- module not found, React
- Is there a way to make react-compound-timer Auto-reset when it hits a value without pressing any buttons?
- Does object destructing uses more memory if i use it in most of the components?
- React Router dynamic url rendering over static url
- How can I fill a konva rect with fillPatternImage in React or create an infinite grid with the same svg image in React
- Use value from object in reducer
- React-dates initialMonth based on available dates
- How to mock a custom hook inside of a React component you want to test?
- file didn't upload react js
- Need to show only one month in range picker selection area antd
- Reactjs: Jsx ternary inline of a component (nested ternaries)
- i am not able to assign dynamic values to the meta tag?
- npm run build is giving me errors I'm not sure how to fix
- I use params and result :TypeError: Cannot read properties of undefined (reading 'map')
- Change state if I choose other React Router?
- Marker animation in google-maps-react
- Getting broken image icon when displaying image from online url in ReactJS