当 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 文件中的额外声明。注意使用 from "react-router" 而不是 from "react-router-dom"。我在 app.js 以上的 index.js 中使用了两个路由器，在 app.js 中使用了一个，这是问题的主要原因。

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

Component does not render when url loads in react-router v4

reactjs

react-router

react-router-v4