In the pre-RRDv6 world you would create a custom history object, to be exported and imported and passed to a Router, and imported and accessible in external javascript logic, like redux-thunks, axios utilities, etc. To replicate this in RRDv6 you need to also create a custom router component so it can be passed an external … Read more
You can specify the end prop on the “root”-level link to the “/dashboard” path. NavLink If the end prop is used, it will ensure this component isn’t matched as “active” when its descendant paths are matched. <NavLink to=” end> {({ isActive }) => isActive ? ( <text style={{color: blue}}>Home</text> ) : ( <text>Home</text> ) } … Read more
To help answer your question, I think you may need to also ask how that route should get blocked. Looking through the example above, you don’t yet have a mechanism that helps answer the question of “should I be able to visit this page”. That might come from state, redux, or some other means of … Read more
In order to make use of history in the App component use it with withRouter. You need to make use of withRouter only when your component is not receiving the Router props, This may happen in cases when your component is a nested child of a component rendered by the Router or you haven’t passed … Read more
After quite a bit of digging through the source code to understand how path parsing was different in RRDv6 from RRDv5, and turned up nothing really other than they no longer use path-to-regex, I hit up the repo’s issues section and found this issue which outright states they don’t plan to support optional path parameters … Read more
It’s similar to how it’s done in v4, two arguments, the second being an object with a state property. navigate( ‘thepath’, { state: { //…values } } }) From the migration guide: Use navigate instead of history If you need to replace the current location instead of push a new one onto the history stack, … Read more
If deploying to GitHub, ensure there is a “homepage” entry for where you are hosting it in Github. Example: “homepage”: “https://github.com/amodhakal/portfolio”, Switch to the HashRouter since GitHub pages doesn’t support the tech used by the BrowserRouter. index import React from ‘react’; import ReactDOM from ‘react-dom/client’; import { HashRouter } from ‘react-router-dom’ import App from ‘./App’; … Read more
You can make use of history.listen() function when trying to detect the route change. Considering you are using react-router v4, wrap your component with withRouter HOC to get access to the history prop. history.listen() returns an unlisten function. You’d use this to unregister from listening. You can configure your routes like index.js ReactDOM.render( <BrowserRouter> <AppContainer> … Read more
I ran into the same issue today and came up with the following solution based on this very helpful article by Andrew Luca In PrivateRoute.js: import React from ‘react’; import { Navigate, Outlet } from ‘react-router-dom’; const PrivateRoute = () => { const auth = null; // determine if authorized, from context or however you’re … Read more
Yes, in react-router-dom version 6 it is a bit different. Please look as the sample below. React Router tutorial import { render } from “react-dom”; import { BrowserRouter, Routes, Route } from “react-router-dom”; import App from “./App”; import Expenses from “./routes/expenses”; import Invoices from “./routes/invoices”; const rootElement = document.getElementById(“root”); render( <BrowserRouter> <Routes> <Route path=”/” element={<App … Read more