如何 1).放一个 div , 2).在 v6 React 中使用 React Router 在 <Routes> 内渲染没有路由的组件？

Question

我想在 <Routes> 中放置一个 div 并且在 <Routes> 中渲染一个 <Topbar /> 和 <Sidebar /> 组件而不使用 <Route> 标签为了他们。

我的代码如下：-

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="login" element={<Login />} />
        <Topbar />
        <div className="container">
          <Sidebar />
          <Route path="/" element={<Home />} />
          <Route path="users" element={<UserList />} />
        </div>
      </Routes>
    </Router>
  );
};

我想为所有路由实施 <Topbar /> 和 <Sidebar />。但对于登录页面的例外情况（Topbar 和 Sidebar 不应显示在登录页面上。这就是为什么我将登录路由放在 Topbar 和 Sidebar.

顶部的原因

控制台显示错误为：

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

如何实现这个功能？

Answer 1

像下面这样更改您的路线，

你需要检查用户是否登录，如果用户登录使用 Tobbar、Sidebar 等，否则只需 return 登录路由

  const App = () => {
  const [isLogin, setIsLogin] = useState(false)


   return (
    <Router>
    <Routes>
   { isLogin ? <Topbar />
     <div className="container">
       <Sidebar />
      <Route path="/" element={<Home />} />
      <Route path="users" element={<UserList />} />
    </div> : <Route path="login" element={<Login />} />
  
  </Routes>
  </Router>
);
};

Answer 2

在 react-router-dom v6 中，只有 Route 和 React.Fragment 组件是 Routes 组件的有效子组件。

使用布局组件呈现 Topbar 和 Sidebar 组件以及 Outlet 用于要呈现这些组件的路由的嵌套路由。

示例：

import { Routes, Route, Outlet } from 'react-router-dom';

const Layout = () => (
  <>
    <Topbar />
    <div className="container">
      <Sidebar />
      <Outlet />
    </div>
  </>
);

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="users" element={<UserList />} />
        </Route>
      </Routes>
    </Router>
  );
};

如何 1).放一个 div , 2).在 v6 React 中使用 React Router 在 <Routes> 内渲染没有路由的组件？

How to 1). put a div , 2). render a component without Route inside <Routes> with React Router in v6 React?

javascript

reactjs

react-router

react-router-dom