URL меняется, но компонент не отображается - PullRequest
0 голосов
/ 28 февраля 2019

У меня есть ниже реагирующий компонент со следующей функцией рендеринга, которая отображает список сотрудников.

  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} />

Выше решает одну проблему, но создает другую, как описано выше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...