score:0
Accepted answer
react-router-dom ships with the two components { navigate, usenavigate }. if you want to use the navigate component, you can just import it and then use it.
import { navigate } from 'react-router-dom' // import it directly
const privateroute = ({ children }) => {
const { user } = useauthcontext();
if (user) {
return children;
} else {
return <navigate to="/login" />
}
};
score:1
usenavigate
returns a function and not a component.
you probably want something like
const privateroute = ({ children }) => {
const { user } = useauthcontext();
const navigate = usenavigate();
if (!user) {
navigate("/login");
return <></>;
}
return children;
};
Source: stackoverflow.com
Related Query
- About react error in Route v6 (privateroute)
- React Route v4 and PrivateRoute gives error - React.createElement: type is invalid
- react router app hosted on firebase issues 404 error only when trying to access route via address bar
- JsHint prompting an error about missing a semicolon in react syntax
- React router v4.2.2: using a string instead of function inside component prop of Route results in error
- Uncaught Error: Error serializing unrecognized object about a date in react
- Is it possible to change route outside react function component and let react-router know about it?
- Type error on React Route component
- React js, error about keys when map on array
- Error in setting default route page to Home page in App.js - React
- How can I make react router direct to my error page when an undefined route is specified?
- React Router Dom rendering route error with loading components
- Can't perform a react state update error when using useEffect in a custom express route
- Route error in react app while using mobx
- React router error about redirecting to the current route. Unsure how to properly structure routes
- SSR React Application using loadable library, throws “Cannot convert undefined or null to object” error intermittently on the server for Home Route
- I'm getting error about a Target library in React
- How to get a response from express server about an error using axios in react app
- React app throwing error about key, but I have already assigned a unique key at the top level
- My react router dom Redirect path is not working . Its not popping any error but is not making my home page to private Route
- getting error about objects are not valid as a React child
- react router v4 about how to match two url with one route and one component
- In react I had created wrapper components.So now i need to use them in my app.tsx in element parameter which is in route tag.But error as not jsx elem
- Adding react components in route path is throwing error
- PrivateRoute isn't working, react route changes v5 - v6.2
- React Route protection with HOC PrivateRoute component with asynchronous jwt token validation
- React Router render error when using Link inside the Route element
- Confused about this compiler error in my react app
- React ErrorBoundary - How to route to a component/homepage upon error in another route component
- Error Running React Native App From Terminal (iOS)
More Query from same tag
- How to type React prop that lifts state up
- defaultExpandAllRows antd table react with fetch not working
- How to call a action creator in a functional component with react-redux?
- React Customize Google calendar's tooltip does't appear
- How to filter and highlight text in the Dynamic nested array of JSON objects based on text match incase sensitive
- How can I call a custom function in "onFilter" in ant design?
- Get props value in method react/redux
- React: How can I render multiple menus with map() without causing a re-render?
- Error: EPERM : Operation not permitted,mkdir
- Checkbox becomes unclickable after checkbox limit function occur reactjs
- What is the best way to redirect based on token and url? React-router-dom
- WebSocket readyState stuck at 0 after a couple of messages are sent
- How to get these values through get() method?
- Asynchronous initialization of Redux state
- react-native: `this.state` is undefined in `render`
- SPA when route change reset store value to default
- how do I use a node module script in react.js?
- Searching engine from array of words in React
- Getting Rocketchat History in React
- Will setState complete before other events are handled?
- How to display loading only on table body in antd without any custom css?
- How to add a premade static page to your gatsby project?
- Cannot handle state of checkbox upon page reload in React
- Best practice when not needed to render the component
- Is it Possible to redirect to installed flutter app page from react app when open in mobile browser
- Unable to override css class of Awesome-slider-react
- Objects are not valid as a React child (found: object with keys {username}). If you meant to render a collection of children, use an array instead
- How can I get the value from select option from Meteor/React?
- TS keyof typeof <Object> does not allow object.keys(<Object>) to be assigned?
- Module not found: Error: Can't resolve './component/Hello'