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