在主组件之外反应路由器渲染组件答案

【问题标题】：React router render component outside main component在主组件之外反应路由器渲染组件
【发布时间】：2016-07-24 16:44:16
【问题描述】：

我希望在根目录渲染一个 SINGLE 组件，而不渲染 Nav 等额外组件。

这是我的路线文件：

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，但当然要获取从“Gatekeeper”组件导入的所有组件。

我怎样才能使索引指向 LandingPage 组件。但是当您转到 /app 时，它将呈现 GateKeeper 组件和所有导入等...

【问题讨论】：

标签： reactjs react-router

【解决方案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>

【讨论】：