score:1
When actually nesting your routes then no Route
components with nested sub-routes can specify the exact
prop because the nested routes won't be able to match exactly and be rendered.
Take a look at react-router-dom
's nesting example.
Another aspect to take note of, within Switch
components, path order and specificity matter. The Switch
will attempt to return and render the first match it finds, you will want to order the routes to list your more specific paths before less specific paths. In other words, "/segment1/segment2"
before "/segment1"
before "/"
.
Root level
<Switch>
<Route path='/app' component={AppPages} />
<Route path='/mobile' component={MobilePages} />
<Route path='/' component={LandingPages} />
</Switch>
Use the useRouteMatch
hook to access the current path
.
path - (string) The path pattern used to match. Useful for building nested
<Route>
s
Landing pages
const { path } = useRouteMatch();
...
<Switch>
<Route path={`${path}/privacypolicy`} component={PrivacyPolicy} />
<Route path={`${path}/termsandconditions`} component={TermsnConditions} />
<Route path={path} component={HomePage} />
</Switch>
App pages
const { path } = useRouteMatch();
...
<Switch>
<Route path={`${path}/signin`} component={SignIn} />
<Route path={`${path}/resetpassword`} component={ResetPassword} />
<Route path={`${path}/register`} component={Register} />
<Route path={path} component={Dashboard} />
</Switch>
Mobile pages
const { path } = useRouteMatch();
...
<Switch>
<Route path={`${path}/one`} component={One} />
<Route path={path} component={MobHome} />
</Switch>
Source: stackoverflow.com
Related Query
- Is it possible to create nested routes with multiple levels using react router dom
- How can I create multiple routes using React Router v4 (Sidebar)?
- Nested routes with react router v4 / v5
- React Router v4 Nested Routes with Switch
- React Router doesn't load images properly with nested routes
- React Router v4 nested routes not work with webpack-dev-server
- React Router v4 with babel gives error with multiple routes
- Nested Routes not rendering with React Router v4
- Using the same component for different Routes with React Router
- ReactJS -How to create multistep component/form with single path using React Router
- Create an axios post with multiple inputs using React Hooks
- Nested routes with react router v4 not working
- Using React Router with Multiple URL Segments
- react router 4 - how to make a root path with nested routes but fallback to not-found
- Using Reach Router with nested routes fails to parse params
- Nested Routes with React Router v4 - Solutions
- React router nested routes with exact path
- Using REACT ROUTER 4 nested Routes are coming blank
- React Router V6 nested Routes with i18n
- React Router v6 - how to handle nested routes but with only current page showing instead of previous pages
- How to make redirect in nested routes with React Router
- Building a dynamic nested routes architechure with React and React Router
- React Router v4 Nested Routes pass in match with Class Component
- react router 4 "Not Found" page with nested routes
- react router - properly using links inside nested routes
- React router nested routes v5 with HTTP request
- Handling multiple routes with React Router
- Nested routes won't work using React Router 6
- Multiple parallel routes with 404 route in React Router
- Using React Router with Switch and can't get the page to render different components when changing routes
More Query from same tag
- fetching data with react hook returns undefined on nested obj properties
- React server-side and client side rendering not seamless
- Redux-orm not calling mapStateToProps after adding data
- FluentUI/React - Get key of dynamic checkbox list onChange
- Cannot set nivo pie chart color scheme
- How to hide navbar in login page in react router
- How to pass not exported function from App to child component
- Formik - How to reset form after confirmation
- how to debug react router not loading component on url change
- ModuleParseError: Module parse failed: Unexpected character '�' (1:0) in nextjs
- Nodejs - Create Array of Objects from filesystem
- React - Prevent re-render whole list when delete element
- CSS grid make items same height
- How can I pass variable in my fetch request
- How to dynamically use react routing
- Loading in Datagrid throw Rendered more hooks than during the previous render
- react-flow change node name
- Next.js with firebase onAuthStateChanged
- React: Multiple table rows in array.map during render
- how to listen dropdown value in another component in react js
- Possible to delay component rendering with `onEnter`?
- How can I set a a state variable to an object in react?
- Checking transform with cypress
- useRef.current.contains is not a function
- Multiple images have uploaded but not showing in UI (React Js)
- Image properties in Next.js
- How to display all images from firebase Storage in react js
- How to map over and return items in localStorage?
- Passing Props (img url ) using React-Modal (react js)
- Avoid double ajax call