Question

我在我的React应用程序中使用了React Router，并且从App Component中，我的所有路由都按预期工作。

但是，我尝试使用React Router来渲染App Component的子组件。当用户导航到＆＃34; / admin＆＃34;路由器成功呈现管理组件。现在，在管理组件中，我想匹配路线＆＃34; / admin / posts / new＆＃34;渲染NewPost组件（Admin的子组件）。

我导入了所有必需的文件，并且没有引发任何错误，但是在访问＆＃34; / admin / posts / new＆＃34;时，应用程序不会呈现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;

在子组件中使用React Router

0 个答案: