如何操作1)。放一个div，2)。是否在v6中使用Reaction路由器呈现不带布线的组件？

织梦狗教程前端问题

2022-01-01

How to 1). put a div , 2). render a component without Route inside lt;Routesgt; with React Router in v6 React?(如何操作1)。放一个div，2)。是否在v6中使用Reaction路由器呈现不带布线的组件？)

本文介绍了如何操作1)。放一个div，2)。是否在v6中使用Reaction路由器呈现不带布线的组件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望在<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的顶部。

控制台显示错误为：

未捕获错误：[topbar]不是<Route>组件。<Routes>的所有组件子项必须是<Route>或<React.Fragment>

如何实现此功能？

推荐答案

仅在react-router-domV6中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中使用Reaction路由器呈现不带布线的组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

react