时间戳

首页 > 解决方案 > 嵌套条件路由渲染

reactjs - 嵌套条件路由渲染

问题描述

如何在路由用户之前包含另一个条件检查？在我的示例中，如果isLoading是false，我想渲染下面的所有路线，但我也想检查tokenValid一些特定路线是否。

if (!isLoading) {
  return (
    <MuiThemeProvider theme={theme}>
      {
        showConnectionWarning &&
        <ConnectionWarning isOnline={isOnline} />
      }
      <Switch>

        <Route path="/authverify/:token" component={Login} />
        {/* Logged in forwards redirect */}
        {loggedIn && (
          <Redirect exact from="/" to={authRedirectTarget} />
        )}
        {/* Login */}
        <Route exact path="/" component={Login} />
        <Route path="/signup" component={Login} />
        <Route path="/signup-info/:token" component={Login} />
        {/* Non-auth redirect */}
        {!loggedIn && (
          <Redirect
            to={{ pathname: '/', state: { from: location } }} />
        )}

        {tokenValid && (
          <Route exact path="/releases" component={ReleasesView} />
          <Route path="/playlists/:id" component={PlaylistDetail} />
          <Route path="/playlists" component={Playlist} />
          <Route path="/account" component={AccountView} />
        )}

        <Route
          path="/search/:category?/:profile?"
          component={Search} />
        <Route component={Fallback} />
      </Switch>

    </MuiThemeProvider>
  );

}
else {
  return (<h1></h1>)
}

标签： reactjsreact-router

解决方案

如果要进行连续路由，则必须<Switch>在条件中包含整个。这是一个认证的例子。

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";

// core components
import Admin from "layouts/Admin.js";
import SignIn from "layouts/SignIn";

const hist = createBrowserHistory();
const loggedRoutes = () => (
  <Switch>
    <Route path="/" component={SignIn} />
    <Route path="/admin" component={Admin} />
    <Redirect from="/admin" to="/admin/aboutUs/whatWeDo" />
  </Switch>
);
const routes = () => (
  <Switch>
    <Route path="/" component={SignIn} />
    <Route path="/login" component={Admin} />
    <Redirect from="/" to="/login" />
  </Switch>
);
ReactDOM.render(
  <Router history={hist}>
    {checkIfAuth? loggedRoutes():routes()}
  </Router>,
  document.getElementById("root")
);

推荐阅读