使用 react router 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>
          )

     }

}

使用 react router dom v4 在特定路线上阻止呈现特定布局？

Prevent rendering of a particular layout when on a specific route with react router dom v4?

reactjs

react-router-dom