具有多种布局的 React Router v4

Question

我想在我的公共布局中渲染我的一些路线，在我的私人布局中渲染一些其他路线，有没有一种干净的方法可以做到这一点？

显然不起作用的示例，但我希望大致说明我在寻找什么：

<Router>

  <PublicLayout>
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/about" component={AboutPage} />
    </Switch>
  </PublicLayout>

  <PrivateLayout>
    <Switch>
      <Route exact path="/profile" component={ProfilePage} />
      <Route exact path="/dashboard" component={DashboardPage} />
    </Switch>
  </PrivateLayout>

</Router>

我想要切换某些路由的布局，我该如何使用新的 react 路由器来做到这一点？

嵌套路由不再起作用并给我这个错误：

You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

编辑：让布局包裹整个路由组也意味着只要您留在同一个私有/公共路由组中，这些布局只会渲染一次。例如，如果您的布局必须从服务器获取某些内容，这将是一件大事，因为如果您使用布局包装每个页面，那么每次页面更改都会发生这种情况。

Answer 1

为此我所做的是创建一个简单的组件，它为 Route 组件添加了一个额外的属性，即布局：

function RouteWithLayout({layout, component, ...rest}){
  return (
    <Route {...rest} render={(props) =>
      React.createElement( layout, props, React.createElement(component, props))
    }/>
  );
}

那么在您的情况下，您的路线将如下所示

<Switch>
    <RouteWithLayout layout={PublicLayout} path="/" component={HomePage}/>
    <RouteWithLayout layout={PublicLayout} path="/about" component={AboutPage}/>
    <RouteWithLayout layout={PrivateLayout} path="/profile" component={ProfilePage}/>
    <RouteWithLayout layout={PrivateLayout} path="/dashboard" component={DashboardPage}/>
</Switch>

Answer 2

2020 年更新

好吧，现在我正在遵循这种方法，它比我之前发布的更简单：

const Pages = () => {
  return (
    <ReactRouter>
      <Switch>
        <Route path="/comingsoon" component={ComingSoon} exact />
        <Route>
          <MainLayout>
            <Switch>
              <Route path="/home" exact>
                <Home />
              </Route>
              <Route path="/login" exact>
                <Login />
              </Route>
              <Route path="/useraccount" exact>
                <UserAccount />
              </Route>
              <Route path="/createaccount" exact>
                <CreateAccount />
              </Route>
              <Route path="/contact" exact>
                <Contact />
              </Route>
              <Route path="/about" exact>
                <About />
              </Route>
              <Redirect path="/" exact to="/comingsoon" />
              <Route path="*" exact component={NotFound} />
            </Switch>
          </MainLayout>
        </Route>
      </Switch>
    </ReactRouter>
  );
};

这样，MainLayout 将处理除即将到来的页面之外的所有内容。

老答案

如果您使用 Typescript 并想关注this react layout aproach，那么您可以像这样声明您的布局：

import './Default.less';

import React from 'react';
import { Route } from "react-router-dom";

import { Sider } from './Components';
import { Notification } from 'Client/Components';

interface IDefaultProps {
  component: any
  path?: string;
  exact?: boolean;
}

const Default: React.SFC<IDefaultProps> = (props) => {
  const { component: Component, ...rest } = props;
  return <Route {...rest} render={matchProps => (
    <div className="defaultLayout">
      <Sider />
      <div className="defaultLayoutContent">
        <Component {...matchProps} />
      </div>
      <Notification />
    </div>
  )} />
}

export default Default;

并像这样声明路由：

import React from 'react';
import { Route } from 'react-router-dom';

import { DefaultLayout } from 'Client/Layout';
import { Dashboard, Matters, Schedules, Students } from './Containers';

export const routes = <div>
  <DefaultLayout exact path="/" component={Dashboard} />
  <DefaultLayout path="/matters" component={Matters} />
  <DefaultLayout path="/schedules" component={Schedules} />
  <DefaultLayout path="/students" component={Students} />
</div>;

Answer 3

2019+

找了之后，干净高效的方式（避免滥用重渲染）：

    <Route exact path={["/about", "/"]}>
      <PublicLayout>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </PublicLayout>
    </Route>
    <Route path={["/profile", "/dashboard"]}>
      <PrivateLayout>
        <Route path="/profile" component={ProfilePage} />
        <Route path="/dashboard" component={DashboardPage} />
      </PrivateLayout>
    </Route>

同样，它可以被重构， 查看我的完整答案： https://stackoverflow.com/a/57358661/3437790

Answer 4

我认为布局不属于路由文件。

保持路线干净，即：

<Route exact path="/" component="HomePage" />

然后，在 HomePage 组件中，将呈现的内容包装在您选择的布局中：

...
render() {
  <PublicLayout>
    <h1>Home page!</h1>
  </PublicLayout>
}

这样，路线保持超级干净，而且您可以轻松地显示路线，该路线应支持两种布局（例如 404 页面）。