[英]React router render component outside main component
I'm looking to render a SINGLE component at the root without rendering the extra components such as Nav. 我希望在根部渲染一个SINGLE组件,而不渲染诸如Nav这样的额外组件。
This is my routes file: 这是我的路线文件:
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>
)
So I'm trying to render the "LandingPage" component as the IndexRoute, but of course get all the components that is being imported from the "Gatekeeper" component. 因此,我尝试将“ LandingPage”组件呈现为IndexRoute,但是当然会获取所有从“ Gatekeeper”组件导入的组件。
How can I make it so the index leads to the LandingPage component. 我怎样才能使索引指向LandingPage组件。 But when you goto /app it will render the the GateKeeper component and all the imports etc... 但是当您转到/ app时,它将呈现GateKeeper组件以及所有导入等。
Maybe nested routes? 也许是嵌套路线? <Route path="/" component={Gatekeeper}>
- Gatekeeper
in this case uses like layout for a pages, including LandingPage
. <Route path="/" component={Gatekeeper}>
-在这种情况下,网Gatekeeper
对页面使用相似的布局,包括LandingPage
。
You must add a second layer to routes, something like this: 您必须在路由中添加第二层,如下所示:
<Route path="/" component={BlankLayout}>
<IndexRoute component={LandingPage}></IndexRoute>
<Route path="*" component={Gatekeeper}>
<IndexRoute component={Home}></IndexRoute>
</Route>
</Route>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.