Как я могу изменить URL без рендеринга другого компонента или перенаправления на другой маршрут в React?

Question

В примере, который я имею в виду, у меня есть индексная страница на /projects.Если я нажимаю на один из элементов на странице, появляется модальное окно с дополнительной информацией.Теперь я хочу, чтобы мои пользователи могли создавать закладки для страницы с открытым модалом по разумному URL, например /projects/1.

Если я использую this.props.history.push("projects/1") для изменения URL-адреса, в браузере ничего не будет отображаться, пока я сначала не определю маршрут.Но на самом деле я вообще не хочу отдельный маршрут, просто способ изменить внешний вид URL-адреса, не отображая какой-либо другой компонент, кроме показа модального (поэтому этот вопрос отличается от, например, Изменение URL-адреса в реакции-маршрутизатореv4 без использования Redirect или Link ).

Кто-нибудь знает, как это сделать, или если это вообще возможно?

FWIW, вот моя маршрутизация в 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>

Answer 1

Вы можете использовать вложенную маршрутизацию

Преобразовать маршрут ваших проектов в

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

И внутри контейнера проекта вы добавите еще один компонент Route, например

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

Заменить мой комментарийс кодом для создания модального

Это позволяет вам добавить ссылку на конкретный проект в закладки и управлять модальным с помощью ссылок