Redirect Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do. whereas History push function Pushes a new entry onto the history stack
Another solution (https://codesandbox.io/s/l4yo482pll) with no handlers nor HOCs, just pure react-router and material-ui components: import React, { Fragment } from “react”; import ReactDOM from “react-dom”; import Tabs from “@material-ui/core/Tabs”; import Tab from “@material-ui/core/Tab”; import { Switch, Route, Link, BrowserRouter, Redirect } from “react-router-dom”; function App() { const allTabs = [“https://stackoverflow.com/”, ‘/tab2’, ‘/tab3’]; return ( <BrowserRouter> … Read more
I use a different approach to fix this. I always separate the different properties (router, regular and dispatch), so I define the following interfaces for my component: interface HomeRouterProps { title: string; // This one is coming from the router } interface HomeProps extends RouteComponentProps<HomeRouterProps> { // Add your regular properties here } interface HomeDispatchProps … Read more
CESCO’s answer renders first the component AppShell then one of the components inside Switch. But these components are NOT going to render inside AppShell, they will NOT be children of AppShell. In v4 to wrap components you don’t put anymore your Routes inside another Route, you put your Routes directly inside a component. I.E : … 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
onEnter no longer exists on react-router-4. You should use <Route render={ … } /> to get your desired functionality. I believe Redirect example has your specific scenario. I modified it below to match yours. <Route exact path=”/home” render={() => ( isLoggedIn() ? ( <Redirect to=”/front”/> ) : ( <Home /> ) )}/>
You shouldn’t need to downgrade to v3, React-Router 4.0.0 is totally capable of accomplishing what the OP asked for. const history = createBrowserHistory(); is a custom history object so you should use <Router> to synchronize it with react-router instead of <BrowserRouter>, which is what I assumed you were using. Try this instead: import React, {Component} … Read more
<Route /> components have render property. So you can modify the page title when location changes by declaring your routes like that: <Route exact path=”/” render={props => ( <Page {…props} component={Index} title=”Index Page” /> )} /> <Route path=”/about” render={props => ( <Page {…props} component={About} title=”About Page” /> )} /> In Page component you can set … Read more
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
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