I am trying to implement lazy loading to my projects so I can lazy load routes of react-router-dom. While going through internet I noticed that there are two ways to implement it - wrapping all routes with one React.Suspense or putting every page withing its own React.Suspense. The thing is that I would like to know if there are any differences between these two methods and if there are, what are their's advantages and disadvantages?
Routes wrapped in one Suspense
<React.Suspense fallback={<p>Loading...</p>}>
<Routes>
<Route path="/" element={<MainPage/>}></Route>
<Route path="/todo/:todoID" element={<TodoPage/>}></Route>
<Route
path="/user/:user"
element={<UserTodos/>}
></Route>
</Routes>
</React.Suspense>
Every route with its own suspense
<Routes>
<Route
path="/"
element={
<React.Suspense fallback={<p>Loading...</p>}>
<MainPage />
</React.Suspense>
}
></Route>
<Route
path="/todo/:todoID"
element={
<React.Suspense fallback={<p>Loading...</p>}>
<TodoPage />
</React.Suspense>
}
></Route>
<Route
path="/user/:user"
element={
<React.Suspense fallback={<p>Loading...</p>}>
<UserTodos />
</React.Suspense>
}
></Route>
</Routes>
So I can't see something react-hooks related here and I don't get the logic a little bit in react component with those passing state in routes.
So basically something like this.
<Router>
<Navbar></Navbar>
<Routes>
<Route path="/guest" element={<Guest></Guest>}></Route>
<Route path="/saved" element={<SavedItem></SavedItem>}></Route>
<Route path="/selectedgallery" element={<SelectedGallery></SelectedGallery>}></Route>
<Route path="/selectedsavedgallery" element={<SelectedSaveGallery></SelectedSaveGallery>}></Route>
<Route path="/login" element={<Login></Login>}></Route>
<Route path="/register" element={<Register></Register>}></Route>
<Route path="/" element={<Gallery></Gallery>}></Route>
<Route path="/create" element={<CreatePin></CreatePin>}></Route>
</Routes>
</Router>
As you see I have <Login> and what I want to do I will pass my useState() in that area and when I get the user I will pass it in my other routes so I could reuse it for users that have login.
I imagine it somehow look like this
const [owner,setOwner] = useState()
...
<Route path="/login" element={<Login></Login>} {whatever here to pass the "setOwner" and "owner".} ></Route>
...
Yes,so I'm passing the props in any routes so that I could reuse it and then other routes can used it for their own purposes.
setOwner can be passed to the Login element as an parameter
<Route path="/login" element={<Login setOwner={setOwner}/>} />
in Login
function Login({setOwner}) {
...
setOwner("foo");
...
}
I have a login form setup using and one particular value props.values.userType I need to pass down via props to my index.js file where I render all my routes.
So in my <Login> component I have a <RadioButtonGroup> that renders the 3 types of users available
<RadioButtonGroup
id="userType"
label="User Type"
value={values.userType}
error={errors.userType}
touched={touched.userType}
onBlur={handleBlur}
>
From here the userType exists in formik as props.values.userType
I want to pass this prop value down to my index.js file that renders all my routes.
index.js below
const Routes = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={FormikLoginForm} />
<PrivateRoute exact path="/admin" component={AdminPage} />
<Route path="/admin/change-password" component={ChangePassword} />
</Switch>
</Router>
);
How can I achieve this?
codesandbox here
Instead of using component as a prop for each <Route />, you can use the render prop to pass props into the component you want to render on that route.
For example in your case, if your component was called Login:
<Route
path='/login'
render={(props) => <Login {...props} userType={props.values.userType} />}
/>
Or something similar depending on your use case.
I need to show different components in one route.
My router with authorization looks like:
<Route authorize={['admin']} component={Authorization}>
<Route path='/home' component={Home} />
</Route>
And in Authorization component I have to check if the user has a access to this route.
But the question is how to show different components on the same route?
Something like this doesn't work:
<Route authorize={['admin']} component={Authorization}>
<Route path='/home' component={AdminHome} />
</Route>
<Route authorize={['manager']} component={Authorization}>
<Route path='/home' component={MangerHome} />
</Route>
Define only one route and create a wrapper component, inside wrapper component check the condition and render different component.
Like this:
<Route authorize={['manager', 'admin']} component={Authorization}>
<Route path='/home' component={WrapperComponent} />
</Route>
Now from Authorization component pass some bool to WrapperComponent to decide between which component do you want to render.
Inside WrapperComponent:
render(){
if(this.props.isAdmin)
return <Home />
return < MangerHome />
}
Consider the following:
var AppRoutes = [
<Route handler={App} someProp="defaultProp">
<Route path="/" handler={Page} />
</Route>,
<Route handler={App} someProp="defaultProp">
<Route path="/" handler={Header} >
<Route path="/withheader" handler={Page} />
</Route>
</Route>,
<Route handler={App} someProp="defaultProp">
<Route path=":area" handler={Area} />
<Route path=":area/:city" handler={Area} />
<Route path=":area/:city/:locale" handler={Area} />
<Route path=":area/:city/:locale/:type" handler={Area} />
</Route>
];
I have an App Template, a HeaderTemplate, and Parameterized set of routes with the same handler (within App template). I want to be able to serve 404 routes when something is not found. For example, /CA/SanFrancisco should be found and handled by Area, whereas /SanFranciscoz should 404.
Here's how I quickly test the routes.
['', '/', '/withheader', '/SanFranciscoz', '/ca', '/CA', '/CA/SanFrancisco', '/CA/SanFrancisco/LowerHaight', '/CA/SanFrancisco/LowerHaight/condo'].forEach(function(path){
Router.run(AppRoutes, path, function(Handler, state){
var output = React.renderToString(<Handler/>);
console.log(output, '\n');
});
});
The problem is /SanFranciscoz is always being handled by the Area page, but I want it to 404. Also, if I add a NotFoundRoute to the first route configuration, all the Area pages 404.
<Route handler={App} someProp="defaultProp">
<Route path="/" handler={Page} />
<NotFoundRoute handler={NotFound} />
</Route>,
What am I doing wrong?
Here's a gist that can be downloaded and experimented on.
https://gist.github.com/adjavaherian/aa48e78279acddc25315
DefaultRoute and NotFoundRoute were removed in react-router 1.0.0.
I'd like to emphasize that the default route with the asterisk has to be last in the current hierarchy level to work. Otherwise it will override all other routes that appear after it in the tree because it's first and matches every path.
For react-router 1, 2 and 3
If you want to display a 404 and keep the path (Same functionality as NotFoundRoute)
<Route path='*' exact={true} component={My404Component} />
If you want to display a 404 page but change the url (Same functionality as DefaultRoute)
<Route path='/404' component={My404Component} />
<Redirect from='*' to='/404' />
Example with multiple levels:
<Route path='/' component={Layout} />
<IndexRoute component={MyComponent} />
<Route path='/users' component={MyComponent}>
<Route path='user/:id' component={MyComponent} />
<Route path='*' component={UsersNotFound} />
</Route>
<Route path='/settings' component={MyComponent} />
<Route path='*' exact={true} component={GenericNotFound} />
</Route>
For react-router 4 and 5
Keep the path
<Switch>
<Route exact path="/users" component={MyComponent} />
<Route component={GenericNotFound} />
</Switch>
Redirect to another route (change url)
<Switch>
<Route path="/users" component={MyComponent} />
<Route path="/404" component={GenericNotFound} />
<Redirect to="/404" />
</Switch>
The order matters!
In newer versions of react-router you want to wrap the routes in a Switch which only renders the first matched component. Otherwise you would see multiple components rendered.
For example:
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route,
browserHistory,
Switch
} from 'react-router-dom';
import App from './app/App';
import Welcome from './app/Welcome';
import NotFound from './app/NotFound';
const Root = () => (
<Router history={browserHistory}>
<Switch>
<Route exact path="/" component={App}/>
<Route path="/welcome" component={Welcome}/>
<Route component={NotFound}/>
</Switch>
</Router>
);
ReactDOM.render(
<Root/>,
document.getElementById('root')
);
With the new version of React Router (using 2.0.1 now), you can use an asterisk as a path to route all 'other paths'.
So it would look like this:
<Route route="/" component={App}>
<Route path=":area" component={Area}>
<Route path=":city" component={City} />
<Route path=":more-stuff" component={MoreStuff} />
</Route>
<Route path="*" component={NotFoundRoute} />
</Route>
This answer is for react-router-4.
You can wrap all the routes in Switch block, which functions just like the switch-case expression, and renders the component with the first matched route. eg)
<Switch>
<Route path="/" component={home}/>
<Route path="/home" component={home}/>
<Route component={GenericNotFound}/> {/* The Default not found component */}
</Switch>
When to use exact
Without exact:
<Route path='/home'
component = {Home} />
{/* This will also work for cases like https://<domain>/home/anyvalue. */}
With exact:
<Route exact path='/home'
component = {Home} />
{/*
This will NOT work for cases like https://<domain>/home/anyvalue.
Only for https://<url>/home and https://<domain>/home/
*/}
Now if you are accepting routing parameters, and if it turns out incorrect, you can handle it in the target component itself. eg)
<Route exact path='/user/:email'
render = { (props) => <ProfilePage {...props} user={this.state.user} />} />
Now in ProfilePage.js
if(this.props.match.params.email != desiredValue)
{
<Redirect to="/notFound" component = {GenericNotFound}/>
//Or you can show some other component here itself.
}
For more details you can go through this code:
App.js
ProfilePage.js
For those who are using react router v6
Redirect component has been removed from the react-router version 6.
For react-router-dom v6, simply replace Redirect with Navigate
Migrating up to v6
npm install react-router-dom#6
import {Routes, Route, Navigate } from "react-router-dom";
function App() {
return (
<div>
<Routes>
<Route path="/404" element={<div>Choose the correct path/div>} />
<Route path="*" element={<Navigate replace to="/404" />} />
</Routes>
</div>
);
}
According to the documentation, the route was found, even though the resource wasn't.
Note: This is not intended to be used for when a resource is not found. There is a difference between the router not finding a matched path and a valid URL that results in a resource not being found. The url courses/123 is a valid url and results in a matched route, therefore it was "found" as far as routing is concerned. Then, if we fetch some data and discover that the course 123 does not exist, we do not want to transition to a new route. Just like on the server, you go ahead and serve the url but render different UI (and use a different status code). You shouldn't ever try to transition to a NotFoundRoute.
So, you could always add a line in the Router.run() before React.render() to check if the resource is valid. Just pass a prop down to the component or override the Handler component with a custom one to display the NotFound view.
The above answers are correct and for react 5 before. In React v6, Switch no longer exists. This solution is for react v6:
import {BrowserRouter as Router, Routes, Route, Link} from "react-router-dom";
...
<Router>
<ul>
<li>
<Link to="t1">component1</Link>
</li>
<li>
<Link to="t2">component2</Link>
</li>
</ul>
<Routes>
<Route path="/t1" exact element={<Component1/>}/>
<Route path="/t2" exact element={<Component2/>}/>
<Route path="*" element={<NotFound/>}/>
</Routes>
</Router>
I just had a quick look at your example, but if i understood it the right way you're trying to add 404 routes to dynamic segments. I had the same issue a couple of days ago, found #458 and #1103 and ended up with a hand made check within the render function:
if (!place) return <NotFound />;
hope that helps!
React Router v6
Live Demo: Redirect Default or 404 Routes with React Router
Example code:
<Router>
<Routes>
<Route path="users" element={<Users />} />
<Route path="posts" element={<Posts />} />
</Routes>
</Router>
To redirect and navigate to one of our chosen routes, we can use <Navigate> component from React Router. Now we can declare below our route configuration the case for empty routes, like this:
<Router>
<Routes>
<Route path="users" element={<Users />} />
<Route path="posts" element={<Posts />} />
<Route path="" element={<Navigate to="/users" />} />
</Routes>
</Router>
I had similar issue, instead of using * wild identifier or Default Switch Component. We can simply just use Route Component without defining path.
example:
<Switch>
<Route path="/" component={Root} />
<Route path="/home" component={Home} />
<Route component={NotFoundPage} />
// Default Component To load If none of the path matches.
</Switch>