如何在 React 中重构我的 App.js 页面路由？最好的做法是啥？
Posted
技术标签:
【中文标题】如何在 React 中重构我的 App.js 页面路由？最好的做法是啥？【英文标题】：How Can I refactor my App.js page routes in React ? What is the best practice for that?如何在 React 中重构我的 App.js 页面路由？最好的做法是什么？ 【发布时间】：2022-01-23 23:24:42 【问题描述】：我的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>
);
【问题讨论】：
【参考方案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>
【讨论】：
【参考方案2】：-
如果三元IS返回组件，你只需要渲染
null。在内部，您可以使用逻辑 AND && 有条件地在 JSX 中呈现内容。
在Switch 路径中的顺序和特异性很重要。将路线从 more 特定路径排序到 less 特定路径。如果订购正确，那么 exact 道具的需求基本上为零。
在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>
);
【讨论】：
以上是关于如何在 React 中重构我的 App.js 页面路由？最好的做法是啥？的主要内容，如果未能解决你的问题，请参考以下文章
使用 create-react-app 构建后如何修复白屏？