Компонент не рендерится при загрузке URL-адреса в реакции-маршрутизаторе v4

Question

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

Я могу изменить маршрут, но компонент не отображается.

Как мне это сделать?Я также разбил свои маршруты на основе разных макетов в моем файле app.js.

App.js

<code> render() {  
   let layoutAssignments = {
      '/': WithLayout,
      '/admin/profiles': WithLayout,
      '/admin/profiles/new': WithLayout,
      '/profiles':WithLayout,
      '/admin/mgmt':WithLayout,
      '/login': WithoutLayout,
      '/donate':WithoutLayout,
      '/admin/profiles/:id':WithoutLayout
    }

    let layoutPicker = function(props){
      var Layout = layoutAssignments[props.location.pathname];
      return Layout ? <Layout/> : <pre>Error 404, Page Not Found

;};возврат ();}}

WithLayout.js

class WithLayout extends Component{
    render(){
        return(
            <> 
                <LayoutContainer>
                    <Switch>
                    {withLayoutRoutes.map(route =><Route key={route.path} path = {route.path} component={route.component}/>)}
                    </Switch>
                </LayoutContainer>
            </>
        );
    }
}

withRoutes

export const withLayoutRoutes = [
    {
        path: path.profilesListing,
        component: ProfilesContainer,
    },
    {
        path: path.profileCreation,
        component: RegistrationContainer,
    },
    {
        path: path.adminProfilesListing,
        component:ProfilesContainer,
    },
    {
        path:path.mgmt,
        component: AdminMgmt,
    }

]

Место, где я определяю маршруты для модального маршрута, который я хочу открыть

<Route path={routes.modal + `/:id`} render={(props) => 
  <PlayerDetailsModal {...props} matchTableData= 
    {this.props.modalInfo.matches}
       modalActions = {this.props.modalActions}
       cardActions = {this.props.cardActions}
       modalInfo = {this.props.modalInfo}
       getModificationData={this.props.getModificationData}
       getPlayerDeleteId={this.props.getPlayerDeleteId}
       hoverIdHandler = {this.props.hoverIdHandler}
       hoverId = {this.props.hoverId}
 />

Я пытался внедрить withRouter для проверки блокировки обновлений, но проблема существует.

Answer 1

Решена проблема, проблема была из-за дополнительной декларации в файле app.js.Обратите внимание, чтобы использовать от «реакции-маршрутизатор», чем от «реагировать-маршрутизатор-дом».Я использовал два маршрутизатора: один в index.js выше app.js и один в app.js, что и стало основной причиной проблемы.

Как перейти к истории в React Router v4?