How to create route in react js

Route in React

Create React Application

Syntex:

npx create-react-app <Your app name>

Command

npx create-react-app routeinreact

Run below command

cd routeinreact

Install Router Dom

npm install react-router-dom

Then import “BrowserRouter” in index.js inside src dir

src\index.js

import {BrowserRouter} from 'react-router-dom'

Now replace <React.StrictMode> tag with <BrowserRouter> inside src\index.js

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Replace With

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Add bootstrap (css and js CDN) in public/index.html file

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" >

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>

Import React-Router-Dom in app.js inside src\App.js

import {Routes, Route, Link} from 'react-router-dom';

Create Routes , path and pass element in app.js

      <div className='container'>
        <Routes>
          <Route path='/' element={<Home/>}></Route>
          <Route path='/About' element={<About/>}></Route>
        </Routes>
      </div>

Create a new component ex: Home component (src/pages/Home.js)

We will keep all new components inside pages dir, so first create ‘pages’ dir inside ‘src’

export default function Home(){
    return (
    <>
      Home page working...
    </>
 )
}

Now import home component in app.js and then check browser.

import Home from './pages/Home.js';

Create Link for home in app.js

        <li className="nav-item">
            <Link className="nav-link active" aria-current="page" to={"/"}>Home</Link>
        </li>

Now create About component inside ‘pages’ directory

export default function About(){
    return (
    <>
    About page working...
    </>
    )
}

Import ‘About’ in app.js

import About from './pages/About';

And create new link for about in app.js

        <li className="nav-item">
           <Link className="nav-link" to="/About">About</Link>
        </li>

Then add employee route in app js file

         <Routes>
          <Route path='/' element={<Home/>}></Route>
          <Route path='/About' element={<About/>}></Route>
        </Routes>

Complete Code

App.js

import logo from './logo.svg';
import './App.css';
import {Routes, Route, Link} from 'react-router-dom';
import Home from './pages/Home.js';
import About from './pages/About';

function App() {
  return (
    <div className="App">
     

<nav className="navbar navbar-expand-lg bg-light">
  <div className="container-fluid">
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav me-auto mb-2 mb-lg-0">
        <li className="nav-item">
        <Link className="nav-link active" aria-current="page" to={"/"}>Home</Link>
        </li>
        <li className="nav-item">
        <Link className="nav-link" to="/About">About</Link>
        </li>
      </ul>
    </div>
  </div>
</nav>


      <div className='container'>
        <Routes>
          <Route path='/' element={<Home/>}></Route>
          <Route path='/About' element={<About/>}></Route>
        </Routes>
      </div>

    </div>
  );
}

export default App;

Home.js

export default function Home(){
    return (
    <>
      Home page working...
    </>
 )
}

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Conclusion

This post will helped us to create routes in react app.

If you face any issue please comment your query.

Keep Learning 🙂