React路由器渲染主要組件外部組件

Question

我正在尋找渲染一個單一的組件在根沒有渲染額外的組件，如導航。

這是我的路線文件：

import React from 'react'; 
import { Route, IndexRoute } from 'react-router'; 

import Gatekeeper from './Gatekeeper'; 

import Home from './components/Pages/Home'; 
import StrainGrid from './components/Strains/StrainGrid'; 
import Single from './components/Strains/Single'; 
import Event from './components/Events/Event'; 
import Faqs from './components/Pages/Faqs'; 
import Login from './containers/Patients/Login'; 
import NewPatient from './containers/Patients/NewPatient'; 
import Billing from './containers/Patients/Billing'; 
import AdminDashboard from './containers/Admin/Dashboard'; 
import AdminAddEditUser from './containers/Admin/AddEditUser'; 
import PatientForm from './containers/Patients/Form'; 
import LandingPage from './components/Pages/LandingPage' 

module.exports =(
    <Route path="/" component={Gatekeeper}> 
     <IndexRoute component={Home}></IndexRoute> 
     <Route path='/view/:postId' component={Single}></Route> 
     <Route path='/events/:eventId' component={Event}></Route> 
     <Route path='/strainguide' component={StrainGrid}></Route> 
     <Route path='/faqs' component={Faqs}></Route> 
     <Route path='/login' component={Login}></Route> 
     <Route path='/signup' component={NewPatient}></Route> 
     <Route path='/patient/billing' component={Billing}></Route> 
     <Route path='/admin' component={AdminDashboard}></Route> 
     <Route path='/admin/addEdit' component={AdminAddEditUser}></Route> 
     <Route path='/patient/form/:patientID' component={PatientForm}></Route> 
     <Route path="*" component={Home} /> 
    </Route> 
) 

所以我想呈現「的LandingPage」組件作爲IndexRoute，但當然得到所有正在從「把關」組件進口部件。

我該如何使索引導致LandingPage組件。但是當你轉到/應用程序將呈現GateKeeper組件和所有導入等...

Answer 1

也許嵌套的路線？ <Route path="/" component={Gatekeeper}> - Gatekeeper在這種情況下使用的頁面佈局相似，其中包括LandingPage。

您必須添加第二層路由，這樣的事情：

<Route path="/" component={BlankLayout}> 
    <IndexRoute component={LandingPage}></IndexRoute> 
    <Route path="*" component={Gatekeeper}> 
     <IndexRoute component={Home}></IndexRoute> 
    </Route> 
</Route>