4

我正在寻找这个，但我找不到正确的答案。是否可以在 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>
4

2 回答 2

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>
  )
}
于 2018-04-03T11:21:48.563 回答
1

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>
   )
}
于 2018-04-01T06:21:55.620 回答