在反应中将内容放入 <Route> 标签时显示白屏

Question

代码显示白屏，甚至不显示页眉和页脚。但是当我删除路由标记中的代码时，它会显示页眉和页脚。

<><BrowserRouter>

  <Header title="My Todos List" searchBar={false} />
  <Routes>
    <Route exact path="/" render={() => {
      return (
        <>
          <Addtodo addTodo={addTodo} />
          <Todos todos={todos} onDelete={onDelete} />
        </>)
    }}>
    </Route>
    <Route exact path="/about">
      <About />
    </Route>
  </Routes>
  <Footer />

</BrowserRouter>
</>

Answer 1

看来您在使用 v6 时混淆了 react-router-dom v5 Route API。 Route 组件不接受 component 或 render 属性，只有其他 Route 组件可以是 Route 的子组件。他们现在只需要一个 element 道具，而这个道具需要一个 ReactElement，a.k.a。 JSX。 exact 道具也不见了。在 RRDv6 中，路由现在 always 完全匹配。

<BrowserRouter>
  <Header title="My Todos List" searchBar={false} />
  <Routes>
    <Route
      path="/"
      element={(
        <>
          <Addtodo addTodo={addTodo} />
          <Todos todos={todos} onDelete={onDelete} />
        </>
      )}
    />
    <Route path="/about" element={<About />} />
  </Routes>
  <Footer />
</BrowserRouter>

Answer 2

我也遇到过和你类似的问题。路由中的内容是否遮挡页眉和页脚。你可以改变布局风格

在反应中将内容放入 <Route> 标签时显示白屏

showing white screen when put content in <Route> tag in react

javascript

jsx

reactjs

react-router-dom