我有一个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>



Layout.js

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


单击未显示的链接(例如,员工或个人资料)时,请尝试使用console.log查看我的布局是否阻碍了该布局,但没有用。请帮我

最佳答案

它应该在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>
      );
    }

关于javascript - 单击链接后无法渲染 react 组件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60491807/

10-10 00:05
查看更多