为什么会出现错误“[Header] 不是 <Route> 组件。”？

Question

我有一个社交媒体应用程序，我的 App.js 看起来像这样：

<div className="App">
      <Router>
        {!name ? (
          <>
            
            <Login />
          </>
        ) : (
          <Routes>
            <Route exact path="/">
              <Header />
              <Feed />
              <Model />
            </Route>
            <Route exact path="">
              <Navigate to="/" />
            </Route>
          </Routes>
        )}
      </Router>
    </div>

因此，如果用户获得授权，它会将我们重定向到主页，但如果他们未经授权，我们将有一个登录页面。

但是我在控制台中遇到下一个错误：

Uncaught Error: [Header] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

导致此错误的原因是什么？

Answer 1

如果您使用的是旧版本react-router-dom：

<Route exact path="/" component={(
    <React.Fragment>
          <Header />
          <Feed />
          <Model />
    </React.Fragment>
)} />

如果您使用的是 V6，请将 component 道具的名称替换为 element 即可。

从 V6 开始，Route 或 Routes 的所有 children 必须是 Route。例如，如果你有一条带有 path="/home" 的路线并且你有一条路线 /home/abc 那么路线 /abc 应该作为 child 进入 /home 路线内部Route 个组件。

我不完全理解为什么他们选择这种方式来做这件事，但是嘿，社区并不重要，对吧？ :)

Answer 2

在 react-router 的第 6 版中，您需要使用 element 道具来告诉它要渲染的内容：

<Route path="/" element={(
  <>
    <Header />
    <Feed />
    <Model />
  </>
)}/>

将子项添加到路由保留用于定义嵌套路由，如：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="users" element={<Users />}>
    <Route path="/" element={<UsersIndex />} />
    <Route path=":id" element={<UserProfile />} />
  </Route>
</Routes>

为什么会出现错误“[Header] 不是 <Route> 组件。”？

Why do I have an error "[Header] is not a <Route> component."?

javascript

reactjs

react-router