Header 只出现在一页上

Question

我正在使用 ReactJS 创建一个 Amazon Clone，但我认为使用“react-router-dom”包时遇到了问题。

这是我的 App.js 文件，其中包含我使用 Router 函数的行

<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>

每个 localhost3000 页面都有效，但只有一个 header 包含在“/payment”页面中。我尝试过的一些解决方案是将 react-router 从 v5 更新到 v6，然后我不得不撤消 switch 函数并将其切换到 routes 函数。此外，我尝试进入 Header.js 文件并寻找任何可以阻止 header 出现在每个页面中或为什么它只出现在该页面上的任何东西。

谢谢！

Answer 1

我有理由相信您错误地传递了每个 <Route> 的 element={...}.

中的组件

请尝试：

只传递一个分量，而不是多个分量
遵循 react-router-dom 关于如何传递组件的示例代码

React Router v5 示例

解决方案 1

<Router>
   <Route path="/orders" component={Orders} />
</Router>

解决方案 2

<Router>
   <Route path="/orders">
      <Orders/>
   </Route>
</Router

阅读更多 here react-router-dom v5 官方文档的示例

React Router v6 示例

    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
    </Routes?

在 react-router-dom v6 官方文档示例中阅读更多 here。

Answer 2

问题确实与传递给 Route 组件的 element 道具的值有关。你所做的是使用 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 a for loop.

换句话说，它处理了所有操作数并且 return 只编辑了最后一个，即 non-header 组件。

要解决，您可以 return JSX 文字数组

element={[<Header />, <Orders />]}

或return一个片段

element={(
  <>
    <Header />
    <Orders />
  </>
)}

或者，如果用页面呈现 header 是您经常做的事情，请将其抽象为布局组件。

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>

Header 只出现在一页上

Header Only Appears On One Page

javascript

reactjs

react-router

react-router-dom

Comma operator (,)