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)