反应组件内的嵌套路由

Question

我正在搜索此内容，但找不到合适的答案。是否可以在 React Component 中像这样使用 React Router；

import { Route, Switch } from 'react-router'    
import LandingLayout from '../../layouts/landing/LandingLayout'
import AppLayout from '../../layouts/app/AppLayout'

<Switch>
  <LandingLayout>
    <Route path="/" exact="true" component={Home} />
    <Route path='/login' component={Login} />
    <Route path='/signup' component={Signup} />
  </LandingLayout>
  <AppLayout>
    <Route path='/dashboard' component={DashboardPage} />
    <Route path='/users' component={UserList} />
    <Route path='/u/:username' component={AccountPage} />
  </AppLayout>
  <Route component={NotFound} />
</Switch>

Answer 1

Switch 仅适用于 Route，并且由于您在不使用 Route 的情况下渲染 LandingLayout 和 AppLayout，因此它们都将默认渲染，虽然可以将路由添加为子路由，但最好将它们添加到组件中，因为你想让 LandingLayout 和 AppLayout 分别呈现你必须将它们写成 routes

import { Route, Switch } from 'react-router'    
import LandingLayout from '../../layouts/landing/LandingLayout'
import AppLayout from '../../layouts/app/AppLayout'

<Switch>
  <Route path="/landing" component={LandingLayout}/> 
  <Route path="/app" component={AppLayout} />
  <Route component={NotFound} />
</Switch>

着陆布局

render() {
   return (
       <div>
          {/* other things*/}
          <Route path={this.props.match.path} exact="true" component={Home} />
          <Route path={`${this.props.match.path}/login`} component={Login} />
          <Route path={`${this.props.match.path}/signup`} component={Signup} />
       </div>
   )
}

AppLayout

render() {
   return (
       <div>
          {/* other things*/}
          <Route path={`${this.props.match.path}/dashboard`} exact="true" component={DashboardPage} />
          <Route path={`${this.props.match.path}/users`} component={Login} />
          <Route path={`${this.props.match.path}/u/:username`} component={AccountPage} />
       </div>
   )
}

Answer 2

经过大量研究，我得到了适合我的案例的正确答案。

首先，我的 React 应用程序是一个服务器呈现的应用程序。第二;由于性能相关问题，我正在使用 React Router Switch。

由于我的应用架构，上述解决方案对我不起作用，我遇到了一些错误，例如；

You should not use Route component and Route children in the same route; Route children will be ignored

所以在这里；我想使用具有多种布局的 React Router Switch。这是如何做到的。

首先，您将创建一个结合了布局和组件的自定义路由器组件。说 "AppRouter"

const AppRouter = ({ component: Component, layout: Layout, ...rest }) => (
   <Route {...rest} render={props => (
     <Layout>
       <Component {...props} />
     </Layout>
   )} />
)

第二；对于 public 和私有路由，必须有两个不同的布局包装器

const LandingRouteLayout = props => (
  <div>
    <LandingLayout {...props}/>
  </div>
)

const AppRouteLayout = props => (
 <div>
   <AppLayout {...props}/>
 </div>
)

最后；路线

const Routes = () => {
  return (
    <Switch>
      <AppRoute exact path="/" layout={LandingRouteLayout} component={Home} />
      <AppRoute path="/login" layout={LandingRouteLayout} component={Login} />
      <AppRoute path="/signup" layout={LandingRouteLayout} component={Signup} />
      <AppRoute path="/t/:token" layout={AppRouteLayout} component={SetToken} />
      <AppRoute path='/dashboard' layout={AppRouteLayout} component={DashboardPage} />
      <AppRoute path="/u/:username" layout={AppRouteLayout} component={AccountPage} />
      <Route component={NotFound} />
    </Switch>
  )
}

反应组件内的嵌套路由

Nested routes inside react component

reactjs

react-router-v4

react-component