Вложенные маршруты React Router v5.0

Вы можете попробовать использовать два разных оператора switch для обработки маршрутов Auth и Protected. У меня был аналогичный вариант использования на работе, и мне было удобно иметь два набора блоков переключателей, из которых только один работал одновременно.

const App: React.FC = () => {
    const history = createBrowserHistory();

    return (
        <div className = "App">
            <Router history = {history}>
                {isLoggedIn ? <PrivateRoutes /> : <AuthRoutes />}
            </Router>
        </div>
    );
};


const PrivateRoutes: React.FC = () => {
    return (
        <>
            <Header />
            <Switch>
                <Route path = "/home" component = {HomePage} />
                <Route path = "/dashboard" component = {DashboardPage} />
                <Route path = "*" component = {NotFoundPage} />
            </Switch>
            <Footer />
        </>
    );
};

const AuthRoutes: React.FC = () => {
    return (
        <>
            <Header />
            <Switch>
                <Route path = "/login" component = {LoginPage} />
                <Route path = "/sign-up" component = {SignUpPage} />
                <Route path = "*" component = {NotFoundPage} />
            </Switch>
            <Footer />
        </>
    );
};

Каждый из ваших макетов должен иметь компонент пути, чтобы отличаться от других макетов.

Например

Макеты аутентификации могут находиться под /auth, например, вход будет /auth/login, регистрация будет /auth/signup

Макет приложения может находиться под /app, например, панель инструментов будет /app/dashboard, дом будет /app/home

Рабочая демонстрация

App.js

import { Switch, BrowserRouter, Route, Redirect } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Layouts />
    </BrowserRouter>
  );
}

Layouts.js

const NotFound = () => <h1>Not Found</h1>;

function Layouts() {
  return (
    <Switch>
      <Route path = "/auth" component = {AuthLayout} />
      <Route path = "/app" component = {AppLayout} />
      <Route path = "/" component = {NotFound} />
    </Switch>
  );
}

AuthLayout

const Signup = () => <p>Login</p>;
const Login = () => <p>Sign up</p>;

function AuthLayout() {
  return (
    <div>
      <h1>Auth Layout</h1>
      <Route path = "/auth/signup" exact component = {Signup} />
      <Route path = "/auth/login" exact component = {Login} />
      <Redirect from = "/auth" to = "/auth/login" exact />
    </div>
  );
}

AppLayout

const Home = () => <p>Home</p>;
const Dashboard = () => <p>Dashboard</p>;

function AppLayout() {
  return (
    <div>
      <h1>App Layout</h1>
      <Route path = "/app/home" exact component = {Home} />
      <Route path = "/app/dashboard" exact component = {Dashboard} />
      <Redirect from = "/app" to = "/app/home" exact />
    </div>
  );
}

Кроме того, если вы хотите защитить определенные маршруты от отображения, если они не аутентифицированы, вы можете создать компонент PrivateRoute, который будет перенаправлять на макет аутентификации, если он не аутентифицирован.

PrivateRoute.js

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render = {props => sessionStorage.token // your auth mechanism goes here
      ? <Component {...props} />
      : <Redirect to = {{ pathname: '/auth' }} />}
  />
);

Вы можете использовать этот компонент PrivateRoute вместо компонента react-routerRoute.

Например:

<PrivateRoute path = "/app" component = {AppLayout} />

Обновлено: Я ответил на этот вопрос другим решением.

Оба решения от @Gaurab Kc и @johnny peter великолепны, хотя в итоге я сделал что-то вроде этого:

<Router history = {history}>
    <Switch>
        <PrivateRoute
            path = "/home"
            component = {HomePage}>
        </PrivateRoute>
        <PrivateRoute
            path = "/dashboard"
            component = {DashboardPage}>
        </PrivateRoute>
        <AuthRoute
            path = "/login"
            component = {LoginPage}>
        </AuthRoute>
        <AuthRoute
            path = "/sign-up"
            component = {SignUpPage}>
        </AuthRoute>
        <Route path = "*" component = {NotFoundPage}/>
    </Switch>
</Router>

AuthRoute и PrivateRoute примерно так:

interface PrivateRouteProps extends RouteProps {
    component: any;
}

const PrivateRoute = (props: PrivateRouteProps) => {
    const {component: Component, ...rest} = props;

    return (
        <Route
            {...rest}
            render = {(routeProps) =>
                localStorage.getItem('user') ? (
                    <div>
                       ... // here is the app header
                       <Component {...routeProps} />
                       .. // here is the app footer
                    </div>
                ) : (
                    <Redirect
                        to = {{
                            pathname: '/login',
                            state: {from: routeProps.location}
                        }}
                    />
                )
            }
        />
    );
};

export default PrivateRoute;

interface AuthRouteProps extends RouteProps {
    component: any;
}

const AuthRoute = (props: AuthRouteProps) => {
    const {component: Component, ...rest} = props;

    return (
        <Route
            {...rest}
            render = {(routeProps) =>
                (
                    <div>
                       ... // here is the auth header
                       <Component {...routeProps} />
                       .. // here is the auth footer
                    </div>
                )
            }
        />
    );
};

export default AuthRoute;

Мне потребовалось некоторое время, чтобы найти ответ, который мне понравился. Оба решения @johnny-peter и @gaurab-kc были великолепны, и они рассказали мне о механизме маршрутизации React.

Решение @johnny-peter имело тот недостаток, что вынуждало меня ставить префикс для всех связанных маршрутов auth под /auth/... (например, /auth/login и auth/sign-up), чего я не хотел.

Решение @gaurab-kc поддерживало только один набор маршрутов.. поэтому, если пользователь уже был зарегистрирован, он больше не мог посещать маршрут /login.

До недавнего времени я использовал свое собственное решение, у которого была проблема «победить всю цель общего верхнего и нижнего колонтитула». как упомянул @johnny-peter, и за него несколько раз проголосовали, как и должно быть.

Теперь я использую другое решение:

<Router history = {browserHistory}>
    <Switch>
        <Redirect exact from = "/" to = "/home"/>
        <Route exact path = {["/login", "/sign-up", ...]}>
            <AuthLayout>
                <Switch>
                    <Route
                        path = "/login"
                        component = {LoginPage}
                    />
                    <Route
                        path = "/sign-up"
                        component = {SignUpPage}
                    />
                </Switch>
            </AuthLayout>
        </Route>
        <Route exact path = {[
            "/home",
            "/dashboard",
            ...
        ]}>
            <SiteLayout>
                <Switch>
                    <Route
                        path = "/home"
                        component = {HomePage}
                    />
                    <Route
                        path = "/dashboard"
                        component = {DashboardPage}
                    />
                </Switch>
            </SiteLayout>
        </Route>
        <Route path = "*" component = {NotFoundPage}/>
    </Switch>
</Router>

что предотвращает все вышеперечисленные недостатки. Это позволяет мне:

1. Используйте макет для каждого раздела, который не перерисовывается при изменении маршрута.
2. Не заставляет меня добавлять какие-либо префиксы к маршрутам.
3. Все маршруты работают одновременно, что позволяет пользователям вернуться к /login или другим auth маршрутам без предварительного выхода из системы.

Единственным недостатком этого решения является наличие большего количества кода и дублирование маршрутов, но это цена, которую я готов заплатить.