javascript - 单击链接后无法渲染 react 组件

Question

我有一个 react 应用程序，其中我包装了其他路线的布局组件，问题是当我单击侧边栏(布局的一部分)中存在的链接时，它们不会在屏幕上呈现，这是我的代码.

App.js

//Imports here
<Provider store={store}>
 <Router>
   <Switch>
     <Layout>
       <Route exact path="/admin" render={() => <Admin />} />
       <Route exact path="/employees" render={() => <Employees />} />
       <Route exact path="/profile" component={Profile} />
     </Layout>
   <Switch>
 </Router>
</Provider>

布局.js

//imports here
//styling here
<Link to='/employees' />
// and likewise for rest of the routes

当点击链接时，即员工或个人资料没有被渲染，尝试console.log来查看我的布局是否阻碍了这一点，但没有用。请帮助我

Answer 1

它应该位于 Switch 组件内，但您可以使用类似的 Layout 组件将其包装起来。

const Headers = () => (
  <Layout>
    <ul>
      <li>
        <Link to="/admin">Admin</Link>
      </li>
      <li>
        <Link to="/profile">Profile</Link>
      </li>
      <li>
        <Link to="/employees">Employees</Link>
      </li>
    </ul>
  </Layout>
);


function App() {
      return (
        <Router>
          <Layout>
            <Header></Header>
           <Switch>
            <Route exact path="/admin" render={() => <Admin />} />
            <Route exact path="/employees" render={() => <Employees/>}/>
            <Route exact path="/profile" component={Profile} />
           </Switch>
          </Layout>
        </Router>
      );
    }