路线不适用于 reactjs 中的 javascript 代码

Question

如果我的用户可用，我正在尝试为用户创建路由，以便用户可以留在主页并且发生此错误（未捕获错误：[登录] 不是 <Route> 组件。所有组件子项<Routes> 的必须是 <Route> 或 <React.Fragment>)

<BrowserRouter>
  <Routes>
    <Route path="/homepage" element={<Homepage/>}>
      {
        user && user._id
          ? <Homepage/>
          : <Login/>
      }
    </Route>
    <Route path="/login" element={<Login/>}/>
    <Route path="/register" element={<Register/>}/>
  </Routes>
</BrowserRouter>

Answer 1

Homepage 和 Login 需要呈现为 Route 的 element，因为只有 Route 或 React.Fragment 组件可以Routes 组件的子项。

<BrowserRouter>
  <Routes>
    <Route
      path="/homepage"
      element={user?._id ? <Homepage/> : <Login/>}
    />
    <Route path="/login" element={<Login/>}/>
    <Route path="/register" element={<Register/>}/>
  </Routes>
</BrowserRouter>

Answer 2

你可以试试方法：

<BrowserRouter>
  < Routes>
    <Route path="/homepage" element={user && user.id ? <Homepage /> : <Login />}>
    </Route>
    <Route path="/login" element={<Login />} />
    <Route path="/register" element={<Register />} />
  </Routes>
</BrowserRouter>

路线不适用于 reactjs 中的 javascript 代码

route does not work with javascript code in reactjs

javascript

reactjs

mern

react-router-dom