Okay, this is very easy, I don’t know why it was not working with me: Just do like this: import Button from ‘@material-ui/core/Button’; import { Link } from ‘react-router-dom’; <Button component={Link} to=”/about” variant=”contained” color=”primary”> About Page </Button> You can find more details at https://mui.com/material-ui/guides/routing/.
useParams is generic. You need to tell typescript which params you are using by specifying the value of the generic There are several ways to solve this This is my favorite way const { sumParams } = useParams<{ sumParams: string }>(); But there are a few more ways (: OR interface ParamTypes { sumParams: string; … 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
I made a custom hook useCurrentPath with react-router v6 to get the current path of route, and it work for me If the current pathname is /members/5566 I will get path /members/:id import { matchRoutes, useLocation } from “react-router-dom” const routes = [{ path: “/members/:id” }] const useCurrentPath = () => { const location = … Read more
You should have a <BrowserRouter> (or any of the provided routers) higher up in the tree. The reason for this is that the <BrowserRouter> provides a history context which is needed at the time the routes are created using useRoutes(). Note that higher up means that it can’t be in the <App> itself, but at … 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
I solved this problem by changing: import {Route, Switch} from “react-router”; to import {Route, Switch} from “react-router-dom”; just add -dom.
To test a component (with Jest) that contains <Route> and withRouter you need to import Router in you test, not in your component import { BrowserRouter as Router } from ‘react-router-dom’; and use it like this app = shallow( <Router> <App /> </Router>);
I was facing the same issue. The following command will resolve it: npm install react-router-dom –save
First off, I would really recommend reading through this site: https://reacttraining.com/react-router/web/api/BrowserRouter React Router’s BrowserRouter maintains the history stack for you, which means that you rarely need to modify it manually. But to answer your questions: Answer 1: You’ll want to use Link or NavLink in almost all use cases. Redirect comes in handy in specific … Read more