Как мне вложить маршруты с маршрутизатором React - PullRequest
Новая
       24

Как мне вложить маршруты с маршрутизатором React

3 голосов
/ 19 сентября 2019

Пожалуйста, прочтите этот вопрос до конца, прежде чем пометить его как дубликат.У меня есть несколько макетов, которые должны включать в себя разные экраны.Каждый макет имеет свой собственный верхний и нижний колонтитулы и другие вещи, которыми должны поделиться схожие страницы.Вот код, который я придумал: 

<BrowserRouter>
  <Route path={['/index', '/about']} component={BaseLayout}>
    <Route path="/index" component={Index} />
    <Route path="/about" component={About} />
  </Route>
  <Route path={['/sign-in', '/sign-up']} component={AuthLayout}>
    <Route path="/sign-in" component={SignIn} />
    <Route path="/sign-up" component={SignUp} />
  </Route>
  <Route path={['/stats'} component={DashboardLayout}>
    <Route path="/stats" component={Stats} />
  </Route>
</BrowserRouter>

Код выше, очевидно, не будет работать, потому что:

Предупреждение: вы не должны использовать <Route component> и в том жемаршрут;<Route component> будет игнорироваться

Ответы на похожие вопросы по SO предлагают использовать компоненты-оболочки напрямую: 

<BrowserRouter>
  <BaseLayout>
    <Route path="/index" component={Index} />
    <Route path="/about" component={About} />
  </BaseLayout>
  <AuthLayout>
    <Route path="/sign-in" component={SignIn} />
    <Route path="/sign-up" component={SignUp} />
  </AuthLayout>
  <DashboardLayout>
    <Route path="/stats" component={Stats} />
  </DashboardLayout>
</BrowserRouter>

Проблема этого подхода в том, что даже при том, что он отображает один экранон также отображает элементы из других макетов, т. е. если вы находитесь на странице индекса, отображаемой внутри BaseLayout, вы также увидите элементы из AuthLayout и DashboardLayout.Что имеет смысл, потому что они не заключены в Route.

Некоторые люди предлагали захватить содержимое всех макетов и добавить их как родных братьев к текущим маршрутам.Однако это беспорядок для меня.Я хочу сохранить все макеты в отдельных файлах и передавать им только экраны как дети.

Буду признателен за любую помощь!

Ответы [ 2 ]

1 голос
/ 19 сентября 2019

Это черновик потенциальной структуры макета: 

<Header>
  <Router>
    <Router path={['/index', '/about']} component={HeaderComponent} />
    <Router path={['/sign-in', '/sign-up']} component={AuthHeaderComponent} />
  </Router>
</Header>
<Screens>
  <Router>
    <Route path="/index" component={BaseLayout(Index)} />
    <Route path="/about" component={BaseLayout(About)} />
    <Route path="/sign-in" component={AuthLayout(SignIn)} />
    <Route path="/sign-up" component={AuthLayout(SignUp)} />
    <Route path="/stats" component={DashboardLayout(Stats)} />
  </Router>
</Screens>
<Footer>
  <FooterComponent />
</Footer>

В этом примере обертки - это HOC, поэтому они могут обрабатывать передачу всех реквизитов от маршрута до компонента страницы, но если вы простохотел сделать встроенную оболочку, вы могли бы использовать функцию рендер : 

<Route
  path="/index"
  render={routeProps => {
    return (
      <BaseLayout>
        <Index {...routeProps}/>
      </BaseLayout>
    );
  }}
/>

[править] Пример компоновки HOC ( документы ) 

const withBaseLayout = WrappedComponent => {
  // any business logic required for the layout
  // layoutProps, style, etc...
  return (
    <BaseLayout {...layoutProps}>
      <WrappedComponent {...this.props} /> // these are all the passed in props
      // you can inject more props into Wrapped component as well
      // i.e. redux's connect or react-router-dom's withRouter HOCs
    </BaseLayout>
  );
}

// in index.js
export default withBaseLayout(Index);

// in route
<Route path="/index" component={Index} /> // already wrapped

или непосредственно как компонент 

const BaseLayoutHOC = WrappedComponent => {
  // any business logic required for the layout
  // layoutProps, style, etc...
  return (
    <BaseLayout {...layoutProps}>
      <WrappedComponent {...this.props} />
    </BaseLayout>
  );
}

// in route
<Route path="/index" component={BaseLayoutHOC(Index)} />
0 голосов
/ 19 сентября 2019

попробуйте добавить точный в каждом маршруте и передать свой компонент внутри, как

Индекс} /> 

import  { Switch , Route  } from 'react-router-dom';

<BrowserRouter>
 
    <Route path="/index" exact component={<BaseLayout>Index </BaseLayout>} />
    <Route path="/about" exact component={<BaseLayout>About</BaseLayout>} />  
    <Route path="/sign-in" exactcomponent={ <AuthLayout>SignIn </AuthLayout>} />
    <Route path="/sign-up" exact component={ <AuthLayout>SignUp </AuthLayout>} />
    <Route path="/stats" exact component={            <DashboardLayout>Stats</DashboardLayout>} />

</BrowserRouter>

Надеюсь, это поможет вам

...