使用反应路由器dom v4在特定路线上防止呈现特定布局？

Question

您好，我是 React 新手，我希望 Layout 在某些特定页面中呈现。 下面是我的代码，我希望Layout 在LandingPage 渲染时不被渲染

import React, { Component } from 'react';
import {createStore, applyMiddleware} from "redux"
import allReducers from "./reducers"
import thunk from 'redux-thunk';
import { Provider } from 'react-redux'
import {
     BrowserRouter as Router,
     Route,
     Link
    } from 'react-router-dom';


import LandingPage from './components/LandingPage';
import Login from './components/Login';
import Registration from './containers/Registration';

const store = createStore(allReducers,
   applyMiddleware(thunk)

);

 class App extends Component {
   render() {
      return (
       <Provider store={store}>
         <Router >
          <div>
        <Route exact path="/" component={LandingPage} /> //** don't render on this page
        <Layout>
          <Route path="/login" component={Login} />
          <Route path="/signup" component={Registration} />
          </Layout>
         </div>
       </Router>
     </Provider>
   );
  }
 }
 export default App;

任何想法！

Answer 1

您可以通过路由到包含 Layout 的单独组件来实现它

import {Switch} from 'react-router'
class App extends Component {
   render() {
      return (
       <Provider store={store}>
         <Router >
          <Switch>
           <Route exact path="/" component={LandingPage} /> //** don't render on this page
            <Route path="/:someParam" component={MyLayout}/>

         </Switch>
       </Router>
     </Provider>
   );
  }
 }

class MyLayout extends React.Component {
    render() {
          return (

             <Layout>
                <Route path="/login" component={Login} />
                <Route path="/signup" component={Registration} />
              </Layout>
          )

     }

}