在某些頁面中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>
);
}
uj5u.com熱心網友回復：
您可以創建一個陣列并將所有必需的欄位放入其中。
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>
uj5u.com熱心網友回復：
null如果三元是組件的回傳，您只需要渲染。在內部，您可以使用邏輯 AND&&來有條件地呈現 JSX 中的內容。- 內部
Switch路徑順序和特異性很重要。將路由從更具體的路徑排序到不太具體的路徑。如果訂購正確，則基本上對exact道具的需求為零。 - 在
react-router-domv4/5 中，Route組件可以采用路徑字串陣列。您可以創建要Navbar渲染的路徑陣列。Navbar使用路徑字串陣列將 Route渲染到 Route 中，并在exact此處使用prop 來防止意外的根/子路由匹配。這里exactprop 用于更明確地說明匹配。
建議重構：
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>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/390789.html