Блог

При настройке приложения react-router я часто настраиваю его на обратные вызовы для представления фильтров авторизации. это приводит меня к таким проектам:

 # before, in my root component
requireAuth() { ... }
noAuth() { ... }
render() {
  return (
    <Router history={this.props.history}>
      <Route path='/' component={App} onEnter={this.requireAuth}>
        <Route path='toys' component={Toys}/>
        ...
      <Route path='/auth' component={Auth} onEnter={this.noAuth}>
        ...
    </Router>
  )
}
  

Сейчас я пытаюсь перенести это в nodejs и отобразить страницу на сервере. Внезапно меня просят сгруппировать все маршруты в const. Во-вторых, я теряю свой корневой компонент и эти this. привязки обратного вызова и не могу воссоздать ту же архитектуру на сервере.

Итак, моя первая проблема — это маршрут. В react я не могу возвращать группы компонентов, но компонент, который инкапсулирует все остальные. Итак, это была моя попытка:

 # root component render
# after import routes from './routes'
render() {
  return (
    <Router routes={routes} history={this.props.history}/>
  );
}
# in routes.js
module.exports = (
  <Route> # is this right?
    <Route path='/' component={App} onEnter={this.requireAuth}>
      <Route path='toys' component={Toys}/>
      ...
    <Route path='/auth' component={Auth} onEnter={this.noAuth}>
      ...
  </Route>
  

Итак, похоже, это не сокращает его, и я получаю несколько ошибок. Во-первых, я инкапсулирую все маршруты внутри основного Route компонента. Правильно ли это с точки зрения react-router? Могу ли я иметь какие-то пустые инкапсулирующие компоненты?

Второй вопрос: как мне теперь связать эти this. обратные вызовы на стороне сервера? Поскольку я следую инструкциям, мой экспресс-маршрутизатор выглядит примерно так:

 import routes from './src/components/routes';
...
app.get('*', (req, res) => {
  match(
    { routes, location: req.url },
    (err, redirectLocation, renderProps) => {
....
  

Но это нарушает:

 onEnter: undefined.requireAuth,
                  ^
TypeError: Cannot read property 'requireAuth' of undefined
  

Что правильно, поскольку константа routes не привязана ни к какому контексту.

Или есть более правильный способ сделать это в react-router, а привязка обратных вызовов к маршрутам — неправильный подход?