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单独渲染，您必须将它们写为路径

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>

<强> LandingLayout

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因为性能相关的问题。

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

您不应在同一路线中使用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>
  )
}

反应组件内的嵌套路由

2 个答案: