У меня есть ниже реагирующий компонент со следующей функцией рендеринга, которая отображает список сотрудников.
render() {
return (
<div>
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{this.props.list.response.map(list => (
<tr key={list._id}>
<td>
<Link to={`/admin/profiles/employee/${list._id}`}>{list.name}</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
этот компонент работает нормально и отображает имена так, как я хочу, чтобы они были.Теперь, когда я нажимаю на имя, я хочу визуализировать компонент профиля.Таким образом, когда выше URL / маршрут совпадают, то визуализируйте компонент профиля.Я делаю это в контейнере App.js, который находится ниже:
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path='/' exact={true} component={LoginPage} />
<Route path='/login' component={LoginPage} />
<PrivateRoute path='/admin' component={Header} />
<PrivateRoute path='/admin/profiles/employee/:id' component={Profiles} /> // --> here it is
</Switch>
</BrowserRouter>
);
}
}
export default App;
Проблема в том, что URL-адрес изменяется, но компонент не рендерится.Ниже приведен мой самый базовый компонент профиля.
import React, { Component } from 'react';
class Profiles extends Component {
render() {
return (
<div>Profiles</div>
);
}
}
export default Profiles;
Что я делаю неправильно и как я могу отобразить этот компонент профиля?
ОБНОВЛЕНИЕ
Когда я переместил порядок маршрутов в App.js, он работает, но затем я теряю компонент Header в компоненте профилей.Как я могу сохранить там компонент Header?
<PrivateRoute path='/admin/profiles/employee/:id' component={Profiles} /> // --> here it is
<PrivateRoute path='/admin' component={Header} />
Выше решает одну проблему, но создает другую, как описано выше.