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在特定路由上阻止呈现特定布局？

1 个答案: