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

Question

I want to render a modal component in a particular route, and display certain information in the modal by passing props, I also want to display the page from where the modal is opened as a background and the modal on top.

I am able to change the route but the component does not render.

How do I go about this? I had also split my routes based on different layouts in my app.js file.

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,
    }

]

Place where i define the routes for the modal i want to open up

<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}
 />

I tried to implement withRouter to check for update blocking, but the problem exists.

harinarayanan · Accepted Answer · 2019-01-08T05:50:49.817

0

Solved the issue, the issue was because of an extra declaration in the app.js file. Take note to use from "react-router" than from "react-router-dom". I had used used Two Routers one in index.js above app.js and one in app.js, which was the main cause of the issue.

How to push to History in React Router v4?

edited Jan 08 '19 at 05:50

answered Dec 31 '18 at 13:59

harinarayanan

53
7

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

1 Answers1