我在我的React应用程序中使用React Router,并且从App Component,我的所有路由都按预期工作 .
但是,我正在尝试使用React Router在App Component的子代中渲染组件 . 当用户导航到“/ admin”时,路由器成功呈现管理组件 . 现在,在Admin组件中,我想匹配路径“/ admin / posts / new”来呈现NewPost组件(Admin的子组件) .
我正在导入所有必需的文件,并且不会抛出任何错误,但是当访问“/ admin / posts / new”时,应用程序不会呈现NewPost组件 . 我在网上挖了一遍,找不到与这个问题相关的东西,但我是React的新手,我可能没有语言可以搜索正确的东西 . 任何帮助表示赞赏!以下是管理组件 . 谢谢!
import React from 'react';
import './index.css';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import NewLabelPost from './NewLabelPost'
const logOut = () => {
firebase.auth().signOut();
}
const Admin = () =>
<Router>
<div>
<h3>Musique Plastique Admin Portal</h3>
<div className="actions">
<ul>
<li className="blue" onClick={logOut}>Log out</li>
<li className="blue"><Link to={`/admin/posts/new`}>Add a new Label Post</Link></li>
</ul>
</div>
<Switch>
<Route exact path={`/admin/posts/new`} render={() => <NewLabelPost />}/>
</Switch>
</div>
</Router>
export default Admin;