IT技术 - React Router v5.0 嵌套路由 - 吾爱随笔录

React Router v5.0 嵌套路由

IT技术 reactjs react-router

2021-04-01 19:06:31

我正在构建一个react应用程序，但我无法使路由工作。

我需要一些验证途径一个共同的布局（页眉，页脚）（，/login，sign-up，forgot-password等...）
我需要需要另一种常见的布局应用程序的保护部分的剩余部分（Home，Dashboard，等...）
我需要另一个没有任何布局的 404 页面。

我从这些链接中尝试了几种技术：

但可以达到工作版本。

这是我目前拥有的：

（注意：现在我忽略了阻止非登录用户进入 AppLayout 的私有路由的需要，我会在之后处理这个问题）

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

    return (
        <div className="App">
            <Router history={history}>
                <Switch>
                    <AppLayout>
                        <Route path="/home" component={HomePage}/>
                        <Route path="/dashboard" component={DashboardPage}/>
                        ...
                    </AppLayout>
                    <AuthLayout>
                        <Route path="/login" component={LoginPage}/>
                        <Route path="/sign-up" component={SignUpPage}/>
                        ...
                    </AuthLayout>
                    <Route path="*" component={NotFoundPage} />
                </Switch>
            </Router>
        </div>
    );
};

export default App;

既AuthLayout与AppLayout简单，类似于（只是对于每个不同的页眉/页脚）：

class AppLayout extends Component {
    render() {
        return (
            <div className="AppLayout">
                <header>...</header>
                {this.props.children}
                <footer>...</footer>
            </div>
        );
    }
}

export default AppLayout;

问题是只呈现来自 AppLayout 的路由。其他路由只显示 AppLayoutheader而footer没有任何内容。

这些是我正在使用的react版本：

    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",

任何帮助，将不胜感激。

提前致谢。

4个回答

您的每个布局都应该有一个路径组件以区别于其他布局。

例如

/auth身份验证布局可以驻留在例如，登录将/auth/login，注册将是/auth/signup

应用程序布局可以在/app例如，仪表板是/app/dashboard，家是/app/home

工作演示

应用程序.js

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

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

布局.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>
  );
}

验证布局

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>
  );
}

应用布局

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组件，如果未通过身份验证，该组件将重定向到 auth 布局。

私有路由.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-router的Route组件。

例如：

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

谢谢！尽管我更喜欢不限制我更改 url (/app, /auth) 的解决方案

2021-05-30 19:06:31

作为一个有 angular 背景的人，这里是我迄今为止在 React 中看到的最明智、最干净的路由方法。React 路由有太多乱七八糟的方法。这是干净，可读，明显且易于扩展的。谢谢

2021-06-02 19:06:31

这个解决方案帮助我弄清楚了。它比海事组织接受的答案要好。

2021-06-03 19:06:31

如果你去类似/app/somethingnotfound它不起作用的东西，它不会去NotFound组件

2021-06-17 19:06:31

@Vencovsky 通过从根布局路由中删除精确，您应该能够导航到 /app/somthing

2021-06-17 19:06:31

我花了一些时间才找到我喜欢的答案。@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>

这可以防止上述所有缺点。它允许我：

为每个部分使用布局，在路线更改时不会重新渲染。
不强迫我为路由添加任何前缀。
所有路由同时工作，让用户无需先注销即可路由回/login或其他auth路由。

此解决方案的唯一缺点是代码较多且路线重复，但这是我愿意支付的成本。

您可以尝试使用两个不同的 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 />
        </>
    );
};

这是一个很好的解决方案！谢谢！我最终使用了另一种解决方案，我将在我自己的答案中介绍该解决方案，但我从您那里学到了很多东西！

2021-06-01 19:06:31

编辑：我已经用另一个解决方案回答了这个问题。

@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;

@johnnypeter 这是有效且重要的一点。但在这个阶段，这是我宁愿支付的解决方案，让我将路由设置为/auth& /app。我很高兴知道是否还有其他解决方案。谢谢。

2021-05-22 19:06:31

这种方法是完全错误的，因为它违背了 SPA 中布局的全部目的。您的布局包含特定屏幕通用的 ui 元素，当布局中的路由更改时，这些元素不会重新呈现。在你的方法中，当你在不同的路由之间切换时，在同一个布局中，你所有的通用 UI 也会被破坏和重新渲染，破坏了通用页眉和页脚的全部目的。

2021-06-07 19:06:31

其它你可能感兴趣的问题

上一篇仅当两个依赖项都发生变化时才运行 Effect 钩子下一篇如何在玩笑中模拟 useHistory 钩子？