score:-1
issue
i think i'm reading between the lines here and guessing/assuming that you are rendering these routes within a switch
component. if this is the case then the issue is that the only valid children components of the switch
are the route
and redirect
components. when the postprovider
component is reached, route matching ceases and the postprovider
component is returned/rendered.
solution
refactor/restructure the components to render the custom privatesroutes
component at the switch
component level so routes can continued to be matched and rendered. move the postprovider
component inside the route.
example:
<switch>
... other more specific routes ...
<route path="/forgot-password">
<forgetpwd />
</route>
<route path="/verifyemail">
<emailvarification />
</route>
<route path="/recover-password">
<recoverpassword />
</route>
<privateroutes path="/dashboard">
<postprovider> // <-- postprovider moved into route
<layout> // <-- layout moved into route
<dashboard />
</layout>
</postprovider>
</privateroutes>
<route path="/:id?">
<publicpage />
</route>
... other routes ...
</switch>
update
<browserrouter> <switch> <route path={"/home"}> <home /> </route> <route path={"/"}> {/* i need to add some logic to protect these routes */} <switch> <route path={"/about"}> <about /> </route> </switch> </route> {/* this below route cannot access */} <route path={"/:id"}> <publicpage /> </route> </switch> </browserrouter>
within the switch
component path order and specificity matters. the less specific path="/"
route is ordered before the "/:id"
path, so "/"
will always be matched and rendered and any routes listed after will effectively be unreachable.
within switch
components you should order the routes by inverse order of path specificity. "/home"
is more specific than "/:id"
is more specific than "/"
, and this should be the order for these three routes.
<browserrouter>
<switch>
<route path="/home">
<home />
</route>
<route path="/:id}>
<publicpage />
</route>
<route path="/">
<switch>
<route path="/about">
<about />
</route>
</switch>
</route>
</switch>
</browserrouter>
the same holds true when using custom route components.
example privateroute
component:
const privateroute = props => {
// auth logic
return isauth ? <route {...props} /> : <redirect to="/login" />;
};
...
<browserrouter>
<switch>
<route path="/home">
<home />
</route>
<privateroute path="/about">
<about />
</privateroute>
<route path="/:id}>
<publicpage />
</route>
</switch>
</browserrouter>
Source: stackoverflow.com
Related Query
- React-Router cannot access to the below routes
- React router v4 - How do you access the state that is passed via Redirect?
- What is the correct way to animate/transition between routes in react router
- How can i access the current hash location on react router 2?
- Is it possible to access the current route component with React Router
- Using the same component for different Routes with React Router
- REACT router cannot access params when using render()
- React router with basename also matches routes without the base path
- React router only show Navigation component if the current path is on any of the valid routes
- How to link to Routes inside the component rendered by another Route with React Router
- React router private route is accessing routes that it shouldn't access
- How can I access the history instance outside of React app with React Router v4?
- react router v6 - modal as nested route - cannot render outlet (trying to render modal on top of the existing page)
- React Router - Should I render all the routes at once?
- React router error about redirecting to the current route. Unsure how to properly structure routes
- How to create routes from anchor tags from react router without the # in the url
- I am using useReducer hook to for making the custom react hook but below in my code i cannot update state which im receiving from the dispatcher funnc
- In my React app hosted by heroku, react browser router can direct exact routes successfully but dynamic routes cannot be found
- React installed react router but cannot get the page to render
- React - How to forward requests to routes that are not listed in the Router to a NotFound (404) component?
- React router is just showing a blank page after I structure like the şmage below
- React router - dynamic routes - accessing state object via the router
- Cannot access the nested objects's data in render function using React useState
- Not able to access detail information from Api using React Router not rendering on the page
- React router sidebar routes correctly but doesn't show the component under the top menu
- How can I use React Router to change routes from within a component that is also Routed in the Main App.js component?
- Using React Router with Switch and can't get the page to render different components when changing routes
- React router routes in route not working . When I type /signUp, I can't get anything on the page
- In React I get the warning: Function component cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
- Create custom dynamic routes with react router and regex to the same component
More Query from same tag
- Push list of elements to component in React
- How to mock properly with Jest a React component using render props
- How to return JSON objects from spring boot controller methods?
- How to check if the user entered input in input field has the string in format '10h' or '10m' using react and javascript?
- compare specific values from objects with different keys Javascript
- React/Javascript Sort complex function
- How to convert a project from npm to yarn by default
- Set text on the same y-aligment line
- How to get the hovered element on Line Chart using Recharts
- Cannot get input field to focus on click
- How can i change Fontawesome icons dynamically in React?
- How to use java applet in reactjs
- How can one set multiple authorization headers in axios?
- Array of Objects Mapping Not Valid React
- React Testing Library - how to set initial value of state variable
- React element width animation
- React useState causes if-else to work incorrectly
- Why is my reducer returning an empty array in react/redux?
- how to await for the aws cognito authenticateUser call (which appears to be a callback)
- Next js how to avoid re-rendering of common components between routed pages?
- Reverse if statement in React and JSX
- How to display specific elements on a page at a specific screen resolution
- How to solve data loading issue in React redux
- react - how to pass event from another class
- React Navbar Error: Element type is invalid:
- PropType error in React form input type
- How to redirect to new component with props on submit using React
- React - render() not called with setState with axios
- Why objects props passed to child components are 'undefinded' but primitives work?
- How should I structure a generic React/Typescript form component whose fields can be passed in as a type?