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

Question

我的 App.js 看起来很丑，有很多路由，并且在某些页面中显示/隐藏 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

1. 如果三元是组件的返回，则只需渲染null。在内部，您可以使用逻辑 AND && 有条件地渲染 JSX 内的内容。
2. 在Switch内部，路径顺序和特殊性很重要。将路由从更多具体路径排序到不太具体路径。如果订购正确，那么对 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>
  );
}