url在react-router v4中加载时组件不呈现

Question

我想在特定路径中渲染模态组件，并通过传递道具在模态中显示某些信息，我也想显示从中打开模态的页面作为背景，并在顶部显示模态。

我可以更改路线，但组件无法渲染。

我该怎么办？ 我还根据app.js文件中的不同布局拆分了路线。

App.js

 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</pre>;
    };
    return (
    <Router>
      <Route path = "*" render={layoutPicker} />
    </Router>
    );
  }
  }

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文件中有一个额外的声明。 请注意，从“反应路由器”使用的要比从“反应路由器dom”使用的要注意。 我曾经在app.js上方的index.js中使用过两个路由器，而在app.js中使用了两个路由器，这是造成此问题的主要原因。

如何在React Router v4中推送到历史记录？