The useEffect is not triggered because the App component is not re-rendered, nothing changed in that component (no state or props update). If you want the App component to re-render when the route change, you can use the withRouter HOC to inject route props, like this : import { Switch, Route, withRouter } from ‘react-router-dom’; … Read more
react-router-dom provides some handy hooks. In your case, I’d suggest useParams() (link to docs) import { useParams } from ‘react-router-dom’; function MyComponent { let { id } = useParams(); return (<p>{id}</p>); } I’d also probably opt for not using withRouter if you will be using the hooks provided by React Router
You can create a particular type or interface to describe your location state and then use it when calling a useLocation hook: import React from “react”; import { useLocation } from “react-router-dom”; interface LocationState { from: { pathname: string; }; } const AuthLayer: React.FC = (props) => { const location = useLocation<LocationState>(); const { from … Read more
Set up your index.js file similar to this ReactDOM.render( <React.StrictMode> <BrowserRouter> <Routes> <Route path=”/” element={ <App /> }> </Route> </Routes> </BrowserRouter> </React.StrictMode>, document.getElementById(‘root’) ); Then remove BrowserRouter in your App.js file const App = () => { return ( <div className=”app”> <Routes> <HomeLayoutRoute path=”/” element={<Home />} /> <PrivateRoute path=”/” element={<PrivateScreen/>} /> <Route path=”/login” element={<LoginScreen/>} /> … Read more
ES lint discourages the use of prop spreading so that no unwanted/unintended props are being passed to the component. More details here: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md To disable it for the particular file, you can put: /* eslint-disable react/jsx-props-no-spreading */ at the top line in your component file. For disabling it for all files, try this: Disable in … Read more
You can use the component prop of Material-UI’s Link to integrate with Link in react-router-dom. You can do the same thing with Material-UI’s Button. Here’s an example showing both: import React from “react”; import { Route } from “react-router”; import { BrowserRouter as Router, Link as RouterLink } from “react-router-dom”; import Link from “@material-ui/core/Link”; import … Read more
The Switch component only ever renders a single route, the earliest match wins. As the Dashboard component is inside it, it gets unmounted whenever another route gets matched. Move this Route outside and it will work as intended with render or children.
React-router’s history is meant to be used just for the navigation of your application and some persistance. I can’t see why you need to use it to open a new tab. I think you should use the window object for this. const handleSubmit = () => { console.log(“doing something”); const win = window.open(“/some-link”, “_blank”); win.focus(); … Read more
This has changed in v6, useHistory is now useNavigate and we can use it as follows: instead of: const history = useHistory() history.push(“https://stackoverflow.com/”) we now use: const navigate = useNavigate() navigate(“https://stackoverflow.com/”)
[email protected]+ Optional segments/parameters have been re-introduced to the library. The docs have been updated, but v6.5.0 Release Notes include the details as well. The above routes can be merged to a single route: <Route path=”/cart/:id?” element={<CartPage />} /> [email protected] After quite a bit of digging through the source code to understand how path parsing was … Read more