React Router не выполняет рендеринг компонента, переданного на маршрут при переносе в другой компонент

Question

Я использую в своем приложении машинопись, React и ReactRouter.

Я хочу реализовать компонент AdminRoute, который рендерится только тогда, когда пользователь имеет определенный уровень авторизации, и в противном случае выполняет перенаправление (или показывает сообщение «Отказано в доступе»). Если я непосредственно реализую логику в своем компоненте приложения, все будет работать.

Но если я создаю компонент AdminRoute и использую его в приложении, он сначала вообще не отображается (при перенаправлении с использованием элемента Link). Но после обновления страницы она всегда отображается независимо от текущего URL-адреса под компонентом текущего маршрута.

Мой код:

Компонент приложения:

const App: React.SFC<{}>  = (
  <div>
    <BrowserRouter>
       <>
         <Route render={props => <Header {...props} />} />
         <Route exact path="/" component={Main} />{' '}
         <Route exact path="/login" render={prop=>this.loginRedirect(props)}/>
         <Route exact path="/register" render={props => <Register {...props} />} />
         <Route exact path="/user" component={UserCard} />


         <AdminRoute exact path="/adminSettings" component={RestrictedSettings} />

         {/*<Route 
              exact path="/adminSettings" 
              render={props => store.user && 
                store.isAuthorized(UserRoles.Admin) 
                  ? <RestrictedSettings /> 
                  : <h2>Access denied</h2>
              }
            />
         */}

      </>
    </BrowserRouter>
  </div>
);

Закомментированный код работает, но AdminRoute - нет.

AdminRoute выглядит так:

const AdminRoute: React.SFC<RouteProps> = 
  ({ component: Component, ...other }) => {
    console.log('accessing protected route');

    return (
      <Route
        {...other}
        render={props =>
          store.user && store.isAuthorized(accessLevel) 
            ? <Component {...props} /> 
            : <h2>Access denied</h2>
        }
      />
    );
});

Я ожидаю, что и встроенная реализация, и функциональный компонент будут работать точно так же.

В чем разница? Я забыл передать собственность? Ошибка в компиляции машинописи?

Пожалуйста, помогите.

Answer 1

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

import {Switch} from "react-router-dom"

const App: React.SFC<{}>  = (
  <div>
    <BrowserRouter>
       <Switch>
         <Route render={props => <Header {...props} />} />
         <Route exact path="/" component={Main} />{' '}
         <Route exact path="/login" render={prop=>this.loginRedirect(props)}/>
         <Route exact path="/register" render={props => <Register {...props} />} />
         <Route exact path="/user" component={UserCard} />


         <AdminRoute exact path="/adminSettings" component={RestrictedSettings} />

         {/*<Route 
              exact path="/adminSettings" 
              render={props => store.user && 
                store.isAuthorized(UserRoles.Admin) 
                  ? <RestrictedSettings /> 
                  : <h2>Access denied</h2>
              }
            />
         */}

      </Switch>
    </BrowserRouter>
  </div>
);

Подробнее здесь: https://reacttraining.com/react-router/web/guides/basic-components