How can I change the URL without rendering another component or redirecting to a different route in React?

Question

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>

Keilath · Accepted Answer · 2018-11-14 18:34:36Z

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

answered Nov 14, 2018 at 18:34

Keilath

4564 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user211309 Over a year ago

That's clever! I'll try that and report back.

Collectives™ on Stack Overflow

How can I change the URL without rendering another component or redirecting to a different route in React?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related