我在我的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;