0

In the example I have in mind, I have an index page at /projects. If I click on one of the items on the page, a modal pops up with further details. Now I want my users to be able to bookmark the page with the modal opened up, at a sensible URL like /projects/1.

If I use this.props.history.push("projects/1") to change the URL, nothing at all will display in the browser unless I define the route first. But really I don't want a separate route at all, just a way to change the appearance of the URL without rendering some other component besides showing the modal (so this question is different from e.g. Changing the URL in react-router v4 without using Redirect or Link).

Does anyone know how to do that, or if it's even possible?

FWIW, here is the routing I have in App.js:

    <Router>
        <div>
          <NavBar/>
          <Switch>
            <Route exact path='/' render={(props) => <Home {...props} buttonVisible={true} />}/>
            <Route exact path='/projects' render={(props) => <ProjectsContainer {...props} projects={this.props.projectList} />} />
            <Route path='/projects/:projectId/result' component={ResultsContainer} />
            <Route exact path='/projects/new' render={(props) => (<div><Home {...props} buttonVisible={false}/></div>)}/>
          </Switch>
        </div>
    </Router>
user211309
  • 99
  • 1
  • 13

1 Answers1

1

You can use nested routing

Convert your projects route to 

<Route path='/projects' render={(props) => <ProjectsContainer {...props} projects={this.props.projectList} />} />

And inside project container you add another Route component like

<Route path={`${match.path}/:id`} render={(props) => /* here you get the id via props.match.params.id */ } />

Replace my comment with the code to create the modal

This allows you to bookmark the link to a specific project and to control the modal just by means of links

Keilath
  • 436
  • 4
  • 10