反应组件内的嵌套路由

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

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

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

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

你不应该在同一个路由中使用 Route 组件和 Route 子组件；路由子节点将被忽略

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

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

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

第二；对于公共和私人路线，必须有两个不同的布局包装器

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>
  )
}

Answer 2

Switch 仅适用于 Route，并且由于您在没有 Route 的情况下渲染 LandingLayout 和 AppLayout，它们都将默认渲染，虽然可以将 Routes 添加为子 Routes，但如果您将它们添加到组件中会更好，因为您想要要让 LandingLayout 和 AppLayout 分别呈现，您必须将它们编写为路由

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>
   )
}

应用布局

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>
   )
}