Маршрутизация в дочернем компоненте с использованием response-router-dom

Question

Я использую шаблон CoreUI Pro для панели инструментов React и пытаюсь интегрировать в нее функциональность регистрации. Мой вход в систему использует AWS Cognito, поэтому я использую этот учебник для этой части.

У меня проблема в том, что после входа ссылки не работают.

Мой верхний уровень rout.js ниже.

export default ({ childProps }) =>
  <HashRouter>
    <Switch>
      <AppliedRoute path='/' exact component={Login} props={childProps} />
      <UnauthenticatedRoute path='/login' exact component={Login} props={childProps} />
      <AuthenticatedRoute path='/dashboard' exact component={Full} props={childProps} />
      <Route component={NotFound} />
    </Switch>
  </HashRouter>

В компоненте Login я перенаправляю на / dashboard, и это работает нормально. Full - это имя компонента, который содержит панель управления.

Когда пользователь входит в полный компонент, я хочу, чтобы он мог перемещаться по нему:

<Container fluid>
              <Switch>
                <Route path='/dashboard' name='Dashboard' component={Dashboard} />
                <Route path='/deliveries/listDeliveries' name='List Deliveries' component={ListDeliveries} />
                <Route path='/shifts/listShifts' name='List Shifts' component={ListShifts} />
                <Route path='/locations/' name='Locations' component={Locations} />
                <Redirect from='/' to='/dashboard' />
              </Switch>
            </Container>

В шаблоне CoreUI это работает, но для меня, если после входа в систему я перехожу на / location, он переходит на мою страницу 404. Я думал о том, чтобы переместить все в routs.js, но проблема в том, что у Full есть окружающий шаблон для страницы, он просто загружает такие компоненты, как Locations, в одну область страницы.

Answer 1

Вы вкладываете маршруты - см. Пример для справки здесь .

Проблема в том, что у вас есть атрибут точный в вашем маршруте к компоненту Full, поэтому компонент не будет отображаться при переходе к маршруту /locations. Я предлагаю реструктурировать ваши маршруты, чтобы вы могли структурировать их, как в примере выше (например, /dashboard/deliveries).

Тогда вы не указали бы атрибут точный в маршруте верхнего уровня и имели бы такие маршруты в компоненте Full:

<Route 
  path={this.props.match.url + '/deliveries/listDeliveries'}
  name='List Deliveries'
  component={ListDeliveries}
/>

Это будет соответствовать маршруту /dashboard/deliveries/listDeliveries.