防止在具有反應路由器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> 
     ) 

    } 

}