score:2
that defeats the purpose of the switch and the router at the same time. from the docs:
renders the first child
<route>
or<redirect>
that matches the location.
switch basically ensures there's only ever one component rendered in the router. for optimal results, keep your routes in one component, as there is rarely any need to nest them like you do. for example:
import { switch, route } from 'react-router'
<switch>
<route exact path="/" component={main}/>
<route path="/assets" component={assets}/>
<route path="/templates" component={templates}/>
</switch>
so you define your routes in your app entry point let's say app.js
. and that's it, if you want more routes, add them there. if you want nested routes, you nest by literally nesting it: <route path="/assets/:id/update" component={assetupdate} />
. that's all there is to it.
Source: stackoverflow.com
Related Query
- Move between nested switches in react router v4
- I created a section to move between different parts of the site with the Router by NavBar in react
- Nested routes with react router v4 / v5
- react router difference between component and render
- How to make react router work with static assets, html5 mode, history API and nested routes?
- React router - Nested routes not working
- React Router v4 nested routes props.children
- What's the Difference between the React Router v4 Router Types?
- React Router v4 Nested match params not accessible at root level
- React router Link not causing component to update within nested routes
- React router best practices for nested navigation?
- Nested React Router : hide parent component on showing nested child component
- React Router v4 Nested Routes with Switch
- What is the correct way to animate/transition between routes in react router
- React Router v5.0 Nested Routes
- How does React router works and what is the difference between <link> and<Route>
- React Native navigating between Nested StackNavigator
- Nested routing is not working in React Router v6
- React Router doesn't load images properly with nested routes
- React router v4 nested route relative path
- How to link to nested routes in React Router
- React router nested routes - How to redirect when no route is matching
- React router nested routes. Not rendering child routes
- Display a simple loading indicator between routes in react router
- How to show loading animation between React Router components
- React Router v4 nested routes not work with webpack-dev-server
- How to share application State between React Router v4 routes
- React Router v4 and nested routes: index navlink always remain active
- How to navigate between different nested stacks in React Navigation 5.x?
- React Router 6 alpha 4 nested routes
More Query from same tag
- Can not import images to react
- How can I uglify my bundle files for React with gulp?
- Event propagation with React bubbling out of order
- Cannot read property 'push' of undefined onClick
- registering a service worker in react
- React component functionality
- How to create fully controlled dropdown in semantic-ui-react
- How to access search params with node.js(express) API call and served on react front-end
- How to manage select box (representing a relation between entities) with Meteor React?
- How to use mixins with Typescript and React JSX (TSX)
- Unable to execute onClick function in mapped ellement
- React Datepicker - wrong date showing when I bind to enable e.preventDefault()
- Couldn't Update array in MongoDB with mongoose
- How to get out a search result from forEach in an Object?
- Send rendered component output to backend
- jsx remove parent according to size
- How to delete single item from realtime Firebase in react app?
- How to access Weather API icon id?
- Loop in array through objects with find()
- useEffect update only when some fields in states have been changed
- Don't get the value after submitting form
- React.js Authentication redirects to login on each refresh
- fill an array with useEffect and map()
- Why is my filtering missing result for RESTCountries API?
- error decorators-legacy. Not vorking mobx+react js
- Mutually exclusive props in a React Component
- Re-render component onClick in reactjs
- How to test conditional rendering of components using Jest and Enzyme
- Trying call useQuery in function with react-apollo-hooks
- Can't Perform a React State Update on an Unmounted Component. This is a no-op - Mob X Related