. Advertisement .
..3..
. Advertisement .
..4..
It’s easy to set a default route redirect to home via React Router, but some novices still struggle with that task. Our Ittutoria team will end your nightmare by offering you a detailed guide!
Key Terms to Remember Before Reading Our Guide
Do you want to get started already? Yes? Terrific! But before we go, note down these key terms we will use throughout the guide.
- BrowserRouter: It’s a router implementation using HTML5 API history to help the UI receive the most recent updates concerning your browser’s URL. BrowserRouter takes charge of all component storage and routing as objects.
- Switch: Switch components help you render the default factors after the app’s rendition, switching between different routes if necessary.
- Route: A statement holding specific app paths along with components’ labels. It will render these elements once the URL matches.
- Link: Similar to HREF links, which allows us to redirect our route to specific components depending on particular paths.
How to Set a Default Route via React Router
Remember these five steps, and you are ready to go!
- Step 1. Install the library
- Step 2. Use BrowserRouter API
- Step 3. Create different components
- Step 4. Move to Index.JS
- Step 5. Use ReDirect
Step 1. Install The Library
Before getting started, use the NPM command to install our library:
npm install react-router-dom
Step 2. Use BrowserRouter API
The best way to achieve router configurations is to use BrowserRouter, wrapping all components within the React app. Here’s the example code:
<Router>
<Switch>
<Route exact path="/path1" component={comp1} />
<Route exact path="/path2" component={comp2} />
<Route exact path="/path3" component={comp3} />
<Route exact path="/path4" component={comp4} />
</Switch>
</Router>
Here, you can see that <Router” serves as a parental component to wrap its child components as <Route>, connected to specific components.
Step 3. Create Different Components
Now you must establish 4 components as given here:
- Check1.jsx
import React from 'react';
export default Check1 => <div>This is Check1 component</div>;
- Check2.jsx
import React from 'react';
export default Check2 => <div>This is Check2 component</div>;
- Check3.jsx
import React from 'react';
export default Check3 => <div>This is Check3 component</div>;
- Home.jsx
import React from 'react';
export default Home => <div>This is home component</div>;
Then, we will use these simple components for our routing process.
Step 4. Move To “Index.JS”
Now, enter your file “Index.JS” to paste these code lines:
import React, { Component } from "react";
import { render } from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect
} from "react-router-dom";
import Home from "./Home";
import Check1 from "./Check1";
import Check2 from "./Check2";
import Check3 from "./Check3";
class App extends Component {
constructor() {
super();
this.state = {
name: "React",
isUserAuthenticated: true
};
}
render() {
return (
<div>
<Router>
<div>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/check1">Check 1</Link>
</li>
<li>
<Link to="/check2">Check 2</Link>
</li>
<li>
<Link to="/check3">Check 3</Link>
</li>
</ul>
<hr />
<Switch>
<Route
exact
path="/"
render={() => {
return (
this.state.isUserAuthenticated ?
<Redirect to="/home" /> :
<Redirect to="/check1" />
)
}}
/>
<Route exact path="/home" component={Home} />
<Route exact path="/check1" component={Check1} />
<Route exact path="/check2" component={Check2} />
<Route exact path="/check3" component={Check3} />
</Switch>
</div>
</Router>
</div>
);
}
}
render(<App />, document.getElementById("root"));
Step 5. Use ReDirect
After the app’s rendition, the system will identify the ‘/’ path. Still, we want to redirect the route to Home, so we suggest you use “Redirect” like this:
<Route exact path="/">
<Redirect to="/home" />
</Route>
Conclusion
Hopefully, you have understood how to set a default route redirect to home via React Router now. Keep browsing this website for more guidance on other React Router issues (such as getting the current route), and write to us if there are any problems!
Leave a comment