Javascript 如何使用React Router DOM组织React路由以避免庞大的文件

发布于10月04日

我正在努力整理我的App.jsx个文件，尽管我注意到考虑到路由的数量，它变得越来越大.

如何才能缩短文件的长度而不是添加文件中的所有内容呢？

下面是一个例子:

function App() {
  const isAuthenticated = userTokenStore((state) => state.isLoggedIn);

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="/support" element={<Support />} />
        <Route path="/apply" element={<Apply />} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<Login />} />
        <Route
          path="/admin/dashboard"
          element={
            <PrivateRoute isAuthenticated={isAuthenticated}>
              <AdminLayout>
                <Dashboard />
              </AdminLayout>
            </PrivateRoute>
          }
        />
        <Route
          path="/admin/tickets"
          element={
            <PrivateRoute isAuthenticated={isAuthenticated}>
              <AdminLayout>
                <Tickets />
              </AdminLayout>
            </PrivateRoute>
          }
        />
        <Route
          path="/admin/orders"
          element={
            <PrivateRoute isAuthenticated={isAuthenticated}>
              <AdminLayout>
                <Orders />
              </AdminLayout>
            </PrivateRoute>
          }
        />
      </Routes>
    </Router>
  );
}

export default App;

我想要做的是创建一个PublicRoutes.jsx文件和一个AdminRoutes.jsx文件，并在主文件上使用这些文件，因此它将如下所示:

function App() {
  const isAuthenticated = userTokenStore((state) => state.isLoggedIn);

  return (
    <Router>
      <Routes>
        <PublicRoutes />
        <AdminRoutes />
      </Routes>
    </Router>
  );
}

export default App;

有可能吗？我试过了，但react-router-dom严格地告诉我，我不能在<Router>中添加除<Route>个组件以外的任何组件.

const PublicRoutes = () => ( <Routes> <Route path="/" element={<Landing />} /> <Route path="/support" element={<Support />} /> <Route path="/apply" element={<Apply />} /> <Route path="/about" element={<About />} /> <Route path="/login" element={<Login />} /> </Routes> );

const AdminRoutes = () => ( <Routes> <Route element={<AdminLayout />}> <Route element={<PrivateRoute />}> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/tickets" element={<Tickets />} /> <Route path="/orders" element={<Orders />} /> </Route> </Route> </Routes> );

function App() { return ( <Router> <Routes> <Route path="*" element={<PublicRoutes />} /> <Route path="/admin/*" element={<AdminRoutes />} /> </Routes> </Router> ); }

function App() { return ( <Router> <Routes> <Route path="/" element={<Landing />} /> <Route path="/support" element={<Support />} /> <Route path="/apply" element={<Apply />} /> <Route path="/about" element={<About />} /> <Route path="/login" element={<Login />} /> <Route path="/admin" element={<AdminLayout />}> <Route element={<PrivateRoute />}> <Route path="dashboard" element={<Dashboard />} /> <Route path="tickets" element={<Tickets />} /> <Route path="orders" element={<Orders />} /> </Route> </Route> </Routes> </Router> ); }

Javascript 如何使用React Router DOM组织React路由以避免庞大的文件

推荐答案

Javascript相关问答推荐

如何使用3个部件之间的路由？

将下拉分区与工具提示结合起来

更改一组用户创建的项目的js排序标准

如何在不分配整个数组的情况下修改包含数组的行为主体？

使用json文件字符串来enum显示类型字符串无法按照计算的enum成员值的要求分配给类型号

我无法在NightWatch.js测试中获取完整的Chrome浏览器控制台日志(log)

我开始使用/url？q=使用Cheerio

如何解决chrome—extension代码中的错误，它会实时覆盖google—meet的面部图像？'

如何修复我的js构建表每当我添加一个额外的列作为它的第一列？

阿波罗返回的数据错误，但在网络判断器中是正确的

JS—删除对象数组中对象的子对象

rxjs插入延迟数据

try 使用javascript隐藏下拉 Select

搜索功能不是在分页的每一页上进行搜索

为什么我的按钮没有从&q；1更改为&q；X&q；？

为什么可选参数的顺序会导致问题？

Docent.cloneNode(TRUE)不克隆用户输入

如何在AG-Grid文本字段中创建占位符

MongoDB通过数字或字符串过滤列表

是否设置以JavaScript为背景的画布元素？