使用 reach-router 在同一路由器中拆分路由

Question

假设我有很多路线，我想将它们分成几组。我将如何在 React 中使用 Reach Router 完成此操作？

我基本上想要完成的示例：

const Router = () => {
    return (
        <Router>
            <AnonymousRoutes />
            <SecureRoutes />
        </Router>
    );
};

const AnonymousRoutes = () => {
    return (
        <>
            <Page1 path="1" />
            <Page2 path="2" />
        </>
    );
};

const SecureRoutes = () => {
    return (
        <>
            <Page3 path="3" />
            <Page4 path="4" />
        </>
    );
};

Answer 1

编辑：所以，我的回答是基于对你的问题陈述的误读。我以为我读的是 react-router，而不是 reach router。我道歉。

所以使用片段正是您可能应该做的。但是，React Reach 目前不支持片段。一线希望，看起来很快就会出现！

https://github.com/reach/router/pull/289

~~如果我没有正确理解你的问题，我认为你正在寻找的是来自 react-router 的 Switch。~~

switch 组件允许开发人员分割他们的路线并在路径上呈现特定内容。

它可能看起来像这样：

import { Switch, Route } from 'react-router' <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch>

使用 reach-router 在同一路由器中拆分路由

Split up routes in same router with reach-router

reactjs

reach-router