I am creating an Amazon Clone using ReactJS and I am having trouble I think using the "react-router-dom" package.
Here is my App.js file with my lines using the Router function
<Router>
<div className="app">
<Routes>
<Route path="/orders" element={< Header />, < Orders />} />
<Route path="/login" element={< Login />} />
<Route path="/checkout" element={< Header />, < Checkout />} />
<Route path="/payment" stripe={promise} element={ < Payment />} />
<Route path="/" element={< Header />, < Home />} />
</Routes>
</div>
</Router>
Each of the localhost3000 pages works, but the only one that has a header included in the "/payment" page. Some solutions that I have tried are updating react-router from v5 to v6, then I had to undo the switch function and switch it to the routes function. Also, I have tried going into Header.js file and looking for anything that could keep the header from appearing in each of the pages or why it is only showing up on that one page.
Thanks!
The issue is indeed with the value passed to the element prop of the Route components. What you've done is used the comma operator.
element={<Header />, <Orders />} // <-- comma operator
Comma operator (,)
The comma operator (
,) evaluates each of its operands (from left to right) and returns the value of the last operand. This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions. This is commonly used to provide multiple parameters to aforloop.
In other words, it processed all the operands and returned only the last one, the non-header component.
To resolve you can either return an array of JSX literals
element={[<Header />, <Orders />]}
or return a fragment
element={(
<>
<Header />
<Orders />
</>
)}
Alternatively, if rendering a header with a page is something you commonly do, abstract this into a layout component.
import { Outlet } from 'react-router-dom';
const HeaderLayout = () => (
<>
<Header />
<Outlet /> // <-- nested routes rendered here
</>
);
...
<Router>
<div className="app">
<Routes>
<Route element={<HeaderLayout />}>
<Route path="/orders" element={<Orders />} />
<Route path="/checkout" element={<Checkout />} />
<Route path="/" element={<Home />} />
</Route>
<Route path="/login" element={< Login />} />
<Route path="/payment" stripe={promise} element={ < Payment />} />
</Routes>
</div>
</Router>
I have reasons to believe that you are passing wrongly the components inside each <Route>'s element={...}.
Please try:
react-router-dom's examples code about how to pass the componentReact Router v5 example
Solution 1
<Router>
<Route path="/orders" component={Orders} />
</Router>
Solution 2
<Router>
<Route path="/orders">
<Orders/>
</Route>
</Router
Read more here on react-router-dom v5 official docs' examples
React Router v6 example
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
</Routes?
Read more here on react-router-dom v6 official docs' example.