[FIXED] Why do we use Routes instead of Switches in React? Whereas our work is done by the switch

Issue

`

import React from "react";
// import { BrowserRouter as Router, Route, Switch} from "react-router-dom"

import Home from "./Home";
import Header from "./Header";

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

const App = () => {
  return (
    //BEM

    <Router>
      <div className="app">
        {/* Switch case */}
        <Switch>
      

        
          {/* checkout page */}
          <Route path="/checkout" >
            <Header/>
            {/* Header */}

            

            <h1>I am a Checkout, Smash the like button</h1>
            </Route>
        
        
          <Route path="/" >
            <Header/>
            <Home/>
            </Route>
          
        </Switch>
      </div>
    </Router>
  );
};

export default App;

`

I am update the code with the help of Routes But my page is gone. So What I do convert. Pls Help

import React from "react";

import Home from "./Home"; import Header from "./Header";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const App = () => { return ( //BEM

<Router>
  <div className="app">
    
    <Routes>
  

    
      {/* checkout page */}
      <Route path="/checkout" element={<Header/>} >
      

        

        <h1>I am a Checkout, Smash the like button</h1>
       
    
    
      <Route path="/" element={Header/>} /> 

//Here I want both page link in one path Header and Home.

        </Route>
      
    </Routes>
  </div>
</Router>

); };

export default App;

Solution

From what I can understand of your question you are trying to render a common Header component with each route. For this you can render the Header component on a layout route that renders also an Outlet component for nested children routes.

Example:

import React from "react";
import Home from "./Home";
import Header from "./Header";
import { BrowserRouter as Router, Routes, Route, Outlet } from "react-router-dom";

const Layout = () => (
  <>
    <Header />
    <Outlet />
  </>
);

const App = () => {
  return (
    <Router>
      <div className="app">
        <Routes>
          <Route element={<Layout />}>
            {/* checkout page */}
            <Route
              path="/checkout"
              element={<h1>I am a Checkout, Smash the like button</h1>}
            />
            <Route path="/" element={<Home />} />
          </Route>
        </Routs>
      </div>
    </Router>
  );
};

See nested routes in the documentation for more details.

Answered By - Drew Reese
Answer Checked By - - Robin (ReactFix Admin)