Способ обработки маршрутизации в React - с помощью React Router .
При такой (виртуальной) маршрутизации существует два основных способа обработки маршрутизации.
1. Первый - это рендеринг различных компонентов при изменении URL-адреса, например, рендеринг компонента <Home/> для "/" и компонента <About/> для "/about".
Пример:
import React, { Component } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import Home from "./pages/Home";
import About from "./pages/About";
class App extends Component {
render() {
return (
<Switch>
<Route exact path="/" component={ Home }/>
<Route path="/about" component={ About }/>
</Switch>
)
}
}
export default withRouter(App);
2. Второй случай, который, как я полагаю, конкретно касается вашего вопроса, - это рендеринг одного и того же компонента с разными данными в зависимости от URL-адреса - например, с компонентом <Profile/>, но изменением его данных для "/profiles/1" против "/profiles/2".
Пример:
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class Profile extends Component {
constructor() {
super();
this.state = {
profileData: {}
}
}
componentDidMount() {
this.fetchData();
}
componentDidUpdate(prevProps) {
const currentId = this.props.match.params.id;
const prevId = prevProps.match.params.id;
if (currentId !== prevId) {
this.fetchData();
}
}
async fetchData() {
const profileId = this.props.match.params.id;
const profileData = await fetch(`http://example.com/api/profiles/${profileId}`);
this.setState({
profileData
});
}
render() {
const { profileData } = this.state;
return (
<div>
<h1>{ profileData.name }</h1>
</div>
)
}
}
export default withRouter(Profile);
Где содержащий родительский компонент <Profile/> имеет <Route/>, который выглядит следующим образом:
<Route path="/profiles/:id" component={ Profile }/>
Что важно, чтобы id был в this.props.match.params.
Обратите внимание, что в приведенном выше примере способ проверки того, какие данные использовать для заполнения представления, заключается в проверке параметра :id в URL. Поскольку информация о URL-адресе передается компоненту <Profile/> в качестве реквизита, мы можем проверить, изменился ли URL-адрес в componentDidUpdate, и получить новые данные в случае изменения.
Наконец, оба они включают в себя небольшую настройку с React Router (в основном это просто упаковка вашего <App/> в <Router/>), но документация должна помочь с этим: https://reacttraining.com/react-router/web/guides/quick-start.
Надеюсь, это поможет.