javascript - 如何在 ReactJS 中跳过某些路由的页眉和页脚？

Question

我有以下代码，它为所有页面呈现一个带有页眉和页脚的应用。

app.js

import React from 'react';
import {
  Route,
  Switch
} from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router'
import Layout from './components/Layout'
import Home from './homeComponent';
import Login from './loginComponent';
import Dashboard from './dashboardComponent';

const App = ({ history }) => {
  return (
    <Layout>
        <ConnectedRouter history={history}>
            <Switch>
              <Route exact={true} path="/" component={Home} />
              <Route path="/login" component={Login} />
              <Route path="/dashboard" component={Dashboard} />
              ... more routes
              <Route component={NoMatch} />
            </Switch>
        </ConnectedRouter>
    </Layout>
  );
};

export default App;

layout.js

import Header from './headerComponent'
import Footer from './footerComponent'
import React, {Component} from 'react'

class Layout extends Component {
    render() {
        return (
            <div>
                <Header />
                {this.props.children}
                <Footer />
            </div>
        )
    }
}

跳过某些页面(例如主页和登录路由)的页眉和页脚呈现的最佳方法是什么？

Answer 1

我建议创建两个具有自己的页眉和页脚以及私有(private)路由的布局:

公共(public)布局

export const PublicLayout = (props) => <div>
<PublicHeader/>
  <Switch>
    <Route exact path="/" component={HomePage}/>
    <Route exact path='/signin' component={SigninForm} />
    <Route exact path='/signup' component={Signup} />         
  </Switch>
<PublicFooter/>

protected 布局

export const ProtectedLayout = (props) => <div>
<ProtectedHeader/>
 <Switch>
   <PrivateRoute exact path='/app/dashboard' component={Dashboard} />
   <Route component={NotFound} />
 </Switch>
<ProtectedFooter/>

在 app.js 中定义高级路由:

export default () => {
  return <div>
    <Switch>
      <Route path='/app' component={ProtectedLayout} />
      <Route path='/' component={PublicLayout} />
    </Switch>
  </div>
}

定义私有(private)路由:

export default ({component: Component, ...rest}) => (
  <Route {...rest} render={props => (
    window.globalState.isAuthenticated() ? (
      <Component {...props} />
    ) : (
      <Redirect to={{
        pathname: '/signin',
        state: {from: props.location}
      }} />
    )
  )} />
)