The tutorial appears to be older and using react-router-dom version 5 whereas you are using version 6. In version 6 there were many breaking API changes. The Route components no longer use component or render props, the element prop that is passed a valid JSX literal replaced them. route props (history, location, and match) also … Read more
Issue You are rendering the navbar outside the routing context. The Router isn’t aware of what routes the links are attempting to link to that it is managing. The reason routing works when directly navigating to “/experiences” is because the Router is aware of the URL when the app mounts. <Navbar /> // <– outside … Read more
Issue <BrowserRouter> <Switch> {authLogin ? ( <> <Route path=”/dashboard” component={Dashboard} exact /> <Route exact path=”/About” component={About} /> </> ) : ( <Route path=”/” component={Login} exact /> )} <Route component={PageNotFound} /> </Switch> </BrowserRouter> The Switch doesn’t handle rendering anything other than Route and Redirect components. If you want to “nest” like this then you need to … Read more
Redirecting alone is done via the Navigate component with the replace prop specified. <Navigate replace to=”/” /> If you want to replicate RRDv5’s Redirect component redirecting from a path then you need to combine with a Route. <Route path=”/somePath” element={<Navigate replace to=”/” />} /> Navigate Routes & Route
This error throws in useNavigate. useInRouterContext will check if the component(which uses useNavigate hook) is a descendant of a <Router>. Here’s the source code to explain why you can’t use useNavigate, useLocation outside of the Router component: useNavigate uses useLocation underly, useLocation will get the location from LocationContext provider. If you want to get the … Read more
The ability to parse query strings was taken out of V4 because there have been requests over the years to support different implementation. With that, the team decided it would be best for users to decide what that implementation looks like. We recommend importing a query string lib. Here’s one that I use const queryString … Read more
If you accidentally installed react-router-dom v6 then the withRouter HOC no longer exists. Either revert back to v5 (run npm install -s react-router-dom@5), or roll your own custom withRouter HOC to inject the props you need or convert the components to function components and use the React hooks. Create custom withRouter Higher Order Component From … Read more
In react-router-dom version 6 there is no render prop for the Route component. You can also simplify your PrivateRoute wrapper component a bit, it doesn’t need to render more Routes and Route components. Conditionally render the component’s children or navigate to log in. const PrivateRoute = ({ auth: { isAuthenticated }, children }) => { … Read more
It’s because the react-router context isn’t set in that component. Since its the <Router> component that sets the context you could use useHistory in a sub-component, but not in that one. Here is a very basic strategy for solving this issue: const AppWrapper = () => { return ( <Router> // Set context <App /> … Read more
You can pass data with Redirect like this: <Redirect to={{ pathname: ‘/order’, state: { id: ‘123’ } }} /> and this is how you can access it: this.props.location.state.id The API docs explain how to pass state and other variables in Redirect / History prop. Source: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#to-object