Admin 18 March, 2023

how to create react route

To create a route for content in a React application, you will need to use a router library like React Router. Here is an example of how you can create a route for content:

First, install React Router using npm:

npm install react-router-dom

Import the necessary components from React Router:

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

 

Wrap your application with the Router component

<Router> <App /> </Router>

  1. Define your routes using the Route component:

<Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch>

 

Here, we have defined three routes:

  • The first route is the home page and it will render the Home component.
  • The second route is the about page and it will render the About component.
  • The third route is the contact page and it will render the Contact component.

 

Create your components:

 

const Home = () => { return <h1>Welcome to my website!</h1>; }; const About = () => { return <h1>About Us</h1>; }; const Contact = () => { return <h1>Contact Us</h1>; };

 

Now, when a user navigates to the root of your application, they will see the Home component. If they navigate to /about, they will see the About component, and so on.

Note: This is a basic example. You can customize your routes and components as per your requirement.