Question

我有一个下面的带有以下渲染功能的react组件，它显示员工列表。

  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 / route匹配时，然后呈现配置文件组件。我在下面的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中移动路由顺序时，它确实起作用，但是随后我在Profiles组件中松开Header组件。如何在其中保留Header组件？

      <PrivateRoute path='/admin/profiles/employee/:id' component={Profiles} /> // --> here it is
      <PrivateRoute path='/admin' component={Header} />

以上所述解决了一个问题，但如上所述又造成了另一个问题。

URL更改，但组件未呈现

0 个答案: