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中使用了两个路由器，这是造成此问题的主要原因。

How to push to History in React Router v4?

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

1 个答案: