如何在 React 中重构我的 App.js 页面路由？最好的做法是什么？

Question

我的App.js 看起来很丑，有很多路由，并且在某些页面中显示/隐藏Navbar 组件。集中路由并以某种方式重构此显示/隐藏Navbar 的最佳实践是什么？有什么建议？我做了一些研究，但无法确定哪种方式更好。

function App() {
  const location = useLocation();


  return (
    <div className="App">
      {splash ? <Splash /> : null}

      {loading && !splash ? <Loading /> : null}
      <Switch>
        <ProtectedRouter exact path={"/"} component={Home} />
        <Route exact path={"/signin"} component={SignIn} />
        <Route exact path={"/signup"} component={SignUp} />
        <Route exact path={"/signup/password"} component={SignUpPassword} />
        <Route exact path={"/auth"} component={SignInSignUp} />
        <Route exact path={"/forget-password"} component={ForgetPassword} />
        <ProtectedRouter exact path={"/sessions"} component={Sessions} />
        <ProtectedRouter exact path={"/awards"} component={Awards} />
        <ProtectedRouter exact path={"/award-details"} component={AwardDetails} />
        <ProtectedRouter exact path={"/features"} component={Features} />
        <ProtectedRouter exact path={"/challenges"} component={Challenges} />
        <ProtectedRouter exact path={"/videos"} component={Videos} />
        <ProtectedRouter exact path={"/help"} component={Help} />
        <ProtectedRouter exact path={"/performance"} component={Performance} />
        <ProtectedRouter exact path={"/profile"} component={Profile} />
        <ProtectedRouter exact path={"/pathways"} component={PathwayCatalog} />
        <ProtectedRouter exact path={"/exercises"} component={Exercises} />
        <ProtectedRouter exact path={"/stats"} component={Stats} />
        <ProtectedRouter exact path={"/notifications"} component={Notification} />
        {/* PUBLIC SHARE PAGES */}
        <Route exact path={"/stats/share"} component={StatsShare} />
        <Route exact path={"/exercises/share"} component={ExercisesShare} />
        <Route exact path={"/performance/share"} component={PerformanceShare} />
        <Route exact path={"/awards/share"} component={AwardsShare} />
        <Route exact path={"/award-details/share"} component={AwardsDetailsShare} />
      </Switch>

      {location.pathname === "/signup" ||
      location.pathname === "/signup/password" ||
      location.pathname === "/auth" ||
      location.pathname === "/features" ||
      location.pathname === "/forget-password" ||
      location.pathname === "/help" ||
      location.pathname === "/skillset" ||
      location.pathname === "/pathways" ||
      location.pathname === "/stats/share" ||
      location.pathname === "/exercises/share" ||
      location.pathname === "/performance/share" ||
      location.pathname === "/awards/share" ||
      location.pathname === "/award-details/share" ||
      location.pathname === "/notifications" ||
      location.pathname === "/notifications" ||
      location.pathname === "/signin" ? null : (
        <Navbar />
      )}
    </div>
  );
}

Answer 1

您可以创建一个数组并将所有必填字段放入其中。

const Routes = [
  {isProtected: true, path: "/", component: Home},
  {isProtected: false, path: "/signin", component: SignIn},
  {isProtected: false, path: "/signup", component: SignUp},
  {isProtected: false, path: "/signup/password", component: SignUpPassword},
  {isProtected: false, path: "/auth", component: SignInSignUp},
  {isProtected: false, path: "/forget-password", component: ForgetPassword},
  {isProtected: true, path: "/sessions", component: Sessions},
];

然后在你的 switch 语句中使用这个数组。

 <Switch>
        {
          Routes.map((route, index) => {
            return(
              route.isProtected? (
                <ProtectedRouter exact path={route.path} component={route.component} />
              ) : (
                <Route exact path={route.path} component={route.component} />
              )
            )
          })
        }
 </Switch>

Answer 2

1. 如果三元IS返回组件，你只需要渲染null。在内部，您可以使用逻辑 AND && 有条件地在 JSX 中呈现内容。
2. 在Switch 路径中的顺序和特异性很重要。将路线从 more 特定路径排序到 less 特定路径。如果订购正确，那么 exact 道具的需求基本上为零。
3. 在react-router-dom v4/5 Route 组件可以采用路径字符串数组。您可以创建一个您希望 Navbar 在其上呈现的路径数组。将Navbar 渲染到带有路径字符串数组的 Route 中，并在此处使用 exact 属性来防止意外的根/子路由匹配。这里exact 属性用于更明确地说明匹配。

建议重构：

const navbarPaths = [
  "/signup/password",
  "/signup",
  "/auth",
  "/features",
  "/forget-password",
  "/help",
  "/skillset",
  "/pathways",
  "/stats/share",
  "/exercises/share",
  "/performance/share",
  "/awards/share",
  "/award-details/share",
  "/notifications",
  "/notifications",
  "/signin",
];

function App() {
  return (
    <div className="App">
      {splash && <Splash />}
      {loading && !splash && <Loading />}

      <Switch>
        <Route path="/signin" component={SignIn} />
        <Route path="/signup/password" component={SignUpPassword} />
        <Route path="/signup" component={SignUp} />
        <Route path="/auth" component={SignInSignUp} />
        <Route path="/forget-password" component={ForgetPassword} />
        <ProtectedRouter path="/sessions" component={Sessions} />

        <Route path="/awards/share" component={AwardsShare} />
        <ProtectedRouter path="/awards" component={Awards} />

        <Route path="/award-details/share" component={AwardsDetailsShare} />
        <ProtectedRouter path="/award-details" component={AwardDetails} />

        <ProtectedRouter path="/features" component={Features} />
        <ProtectedRouter path="/challenges" component={Challenges} />
        <ProtectedRouter path="/videos" component={Videos} />
        <ProtectedRouter path="/help" component={Help} />

        <Route path="/performance/share" component={PerformanceShare} />
        <ProtectedRouter path="/performance" component={Performance} />

        <ProtectedRouter path="/profile" component={Profile} />
        <ProtectedRouter path="/pathways" component={PathwayCatalog} />

        <Route path="/exercises/share" component={ExercisesShare} />
        <ProtectedRouter path="/exercises" component={Exercises} />

        <Route path="/stats/share" component={StatsShare} />
        <ProtectedRouter path="/stats" component={Stats} />

        <ProtectedRouter path="/notifications" component={Notification} />
        <ProtectedRouter path="/" component={Home} />
      </Switch>

      <Route path={navbarPaths} exact component={Navbar} />
    </div>
  );
}

与其他答案一样，如果您想提取路线渲染，您可以将它们指定到一个数组中并映射它们。

例子：

const routes = [
  {
    path: "....."
    private: true|false,
    component: ComponentReference
    // ... any other route props
  },
  ...
];

...

function App() {
  return (
    <div className="App">
      {splash && <Splash />}
      {loading && !splash && <Loading />}

      <Switch>
        {routes.map(({ private, ...routeProps }) => {
          const RouteWrapper = private ? ProtectedRouter : Route;
          return <RouteWrapper key={routeProps.path} {...routeProps} />;
        })}
      </Switch>

      <Route path={navbarPaths} exact component={Navbar} />
    </div>
  );
}