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>