score:3
issue
after scouring your repo looking for the usual suspect causes for "it does not navigate only the url changes" i didn't find anything odd like multiple router
components, etc. i think the issue is your privateroute
component isn't passing the props to the route
correctly. you're destructuring a prop called rest
and then spread that into the route
, but you don't pass a rest
prop to the privateroute
export default function privateroute({ component: component, rest }) { // <-- rest prop
const { currentuser } = useauth();
return (
<route
{...rest} // <-- nothing is spread/passed here
render={props => {
return currentuser ? (
<component {...props} />
) : (
<redirect to='/login' />
);
}}
/>
);
}
the routes, these are not passed any prop named rest
:
<privateroute exact path='/' component={dashboard} />
<privateroute
exact
path='/folder/:folderid'
component={dashboard}
/>
what i believe to be occurring here is the exact
and path
props aren't passed to the underlying route
component and so the first nested component of the switch
is matched and rendered, the "/" one that doesn't have any route params.
solution
the fix is to spread the rest of the passed props into rest
instead of destructuring a named rest
prop.
export default function privateroute({ component: component, ...rest }) {
const { currentuser } = useauth();
return (
<route
{...rest}
render={props => {
return currentuser ? (
<component {...props} />
) : (
<redirect to='/login' />
);
}}
/>
);
}
an improvement of your private route may be as follows:
export default function privateroute(props) {
const { currentuser } = useauth();
return currentuser ? (
<route {...props} />
) : (
<redirect to='/login' />
);
}
this checks your user authentication and renders either a route
or redirect
. this pattern allows you to use all the regular route
props so you aren't locked into using the render
prop to render the component.
Source: stackoverflow.com
Related Query
- react router use params returns empty object
- React Router params returning empty object
- React Router useParams hook returning empty object
- React - Importing non-modular sass file returns empty object
- React Router - can't use MATCH PARAMS and app state in route
- how to use params in meteor mongo query with react router
- Fetching all users from mongo returns empty object React Meteor
- Is it an incorrect practice to use URL params as a way to fetch data using react router in an react application?
- React useParams not showing params at all, returns object with many values
- React component returns empty doing foreach on JSON object
- How to use params to react router dom link
- React useContext returns undefined before requested object resulting in an error when trying to use .map(). How can I get rid of undefined?
- Multiple params with React Router
- How to use React Router with Electron?
- You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
- React Router - how to constrain params in route matching?
- Pass object through Link in react router
- How to use React Router with Laravel?
- How to use context api with react router v4?
- How to use React Router on top of Rails router (not using react-rails gem)?
- react this.props undefined or empty object
- How to pass params into link using React router v6?
- How to send params in useHistory of React Router Dom?
- How to get params in component in react router dom v4?
- React Router v4 - Redirect to same route with different query params
- how to access history object in new React Router v4
- React Router 4 Match returns undefined
- How can I use history.push('path') in react router 5.1.2 in stateful component?
- React Router v4 Nested match params not accessible at root level
- How to use Apollo Client + React Router to implement private routes and redirection based on user status?
More Query from same tag
- How to call a method with an argument sometimes and sometimes no argument passed using javascript and react?
- how to draw only straight lines using react recharts
- Fetch API requesting multiple get requests
- WebSocket SocketIO connection not working with NestJS server on Heroku and react client on Vercel
- MUI V5 React unit test not triggering the Date Picker handler
- Conditional display of items on React-Autocomplete input
- How to use React Keycloak?
- Programmatically close ant design rangepicker in react
- Axios catching a Promise Error
- Proxy in mobx -state-tree
- Proper way to use react-hook-form Controller with Material-UI Autocomplete
- Passing a function and a prop to another component but getting undefined
- How do you solve error on node install i can't run any node commands
- React/React Hooks: Unknown prop type error on input, can't figure out how to resolve
- JSON object vs window variable for passing server-side rendered initial state using reactjs
- Reuse navbar component in every private route in react
- How can I show a different sidebar based on user information? After logged in. ReactJS
- React Native expo CLI Error: Cannot find module 'semver'
- React hooks onclick event with multiple params without unnecessary rerender?
- Animation on element not applied
- How to reload stripe elements according to different API keys?
- Adding extra server call on Springboot application causing issue with CORS
- How to trigger unmounting of functional components while testing?
- React.js: How to redirect to another page upon click of menu?
- Exporting the output of an API as an object
- ImportError: cannot import name 'OrderDetailView' from 'core.api.views' in Django and ReactJs
- React onClick function fires on render
- Using React forwardRef with Redux connect
- Passing a function to a button within dangerouslySetInnerHTML doesn't work
- Why does my React app work locally but not on Azure?