Javascript react路由器显示根组件以及路由路径

我目前还不熟悉React，并尝试使用React路由器。但是我有一个问题，顶层组件和路径中的组件都被显示。在我的App.js中，我有一个仪表板组件，它有一个导航栏组件，上面有我的路由器

这是我的仪表板组件

import React, { Component } from "react";
import { adalApiFetch } from "../config/adal-config";
import NavBar from "./NavBar";

export default class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isData: false,
      data: []
    };
    this.postToBackEnd = this.postToBackEnd.bind(this);
  }

  fetchData = () => {
    adalApiFetch(fetch, "/g2", {})
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          this.setState({ isData: true, data: responseJson });
        }
      })
      .catch(error => {
        console.error(error);
      });
  };

  componentDidMount() {
    this.fetchData();
  }

  postToBackEnd() {
    adalApiFetch(fetch, "/sendEmail", {
      method: "post",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        username: this.state.data.username,
        email: this.state.data.email
      })
    })
      .then(response => response.json())
      .then(responseJson => {
        console.log(responseJson);
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    const { data, isData } = this.state;

    let spinner = (
      <strong className="c-spinner" role="progressbar">
        Loading…
      </strong>
    );

    return (
      <div>
          <header>
            <NavBar username={data.username} user_id={data.id} />
          </header>
        {isData ? (
          <div>

            <div className="o-container">
              <p className="c-heading-alpha u-margin-bottom-none">
                Wifi Maintenance Notifications
              </p>
              <p className="c-heading-delta u-margin-bottom"></p>
            </div>
            <div className="o-container">
              <article className="c-tile">
                <div className="c-tile__content">
                  <div className="c-tile__body u-padding-all">
                    <button
                      className="c-btn c-btn--primary"
                      onClick={this.postToBackEnd}>
                      Post
                    </button>
                  </div>
                </div>
              </article>
            </div>
          </div>
        ) : (
          <div className="o-container">{spinner}</div>
        )}
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“./config/adal config”导入{adalApiFetch}；
从“/NavBar”导入导航栏；
导出默认类仪表板扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isData:false，
数据：[]
};
this.postToBackEnd=this.postToBackEnd.bind（this）；
}
fetchData=（）=>{
adalApiFetch（获取“/g2”，{}）
.then（response=>response.json（））
.然后（responseJson=>{
如果（！this.isCancelled）{
this.setState（{isData:true，data:responseJson}）；
}
})
.catch（错误=>{
控制台错误（error）；
});
};
componentDidMount（）{
这是fetchData（）；
}
postToBackEnd（）{
adalApiFetch（获取“/sendmail”{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify({
用户名：this.state.data.username，
电子邮件：this.state.data.email
})
})
.then（response=>response.json（））
.然后（responseJson=>{
console.log（responseJson）；
})
.catch（错误=>{
控制台错误（error）；
});
}
render（）{
const{data，isData}=this.state；
设微调器=(

加载…

);
返回(
{isData(

Wifi维护通知


邮递
) : (
{spinner}
)}
);
}
}

这是我的导航栏组件

import React, { Component } from "react";
import { logOut } from "../config/adal-config";
import "./styles/NavBar.scss";
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Switch
} from "react-router-dom";
import Dashboard from "./Dashboard";
import Account from "./Account";
import History from "./History";


export default class NavBar extends Component {
  onLogOut() {   
    logOut();
  }

  render() {
    return (
      <Router>
        <div className="Header-navbar">
          <ul>
            <li>
              <NavLink exact to="/">
                Home
              </NavLink>
            </li>
            <li>
              <NavLink exact to="/history">
                History
              </NavLink>
            </li>
            <li>
              <NavLink exact  to="/account">
                Account
              </NavLink>
            </li>
            <li>
              <NavLink exact to="/logout" onClick={() => this.onLogOut()}>
              logout
              </NavLink>
            </li> 
            <li>{this.props.username}</li>
          </ul>
          <Switch>
            <Route exact path="/" component={Dashboard} />
            <Route  exact path="/history" render={() => <History/>} />
            <Route  exact path="/account" render={() => <Account/>} />
          </Switch>
          <p hidden>{this.props.user_id}</p>
        </div>
      </Router>
    );
  }
}

import React，{Component}来自“React”；
从“./config/adal config”导入{logOut}；
导入“/styles/NavBar.scss”；
进口{
BrowserRouter作为路由器，
路线,，
导航链接，
转换
}从“反应路由器dom”；
从“/Dashboard”导入仪表板；
从“/Account”导入帐户；
从“/History”导入历史记录；
导出默认类导航栏扩展组件{
onLogOut（）{
注销（）；
}
render（）{
返回(


家


历史


账户


this.onLogOut（）}>
注销

{this.props.username}

} />
} />

);
}
}

---

历史记录和帐户组件只有一个简单的H1标记。每当我导航到这些组件时，我的仪表板组件也会被加载。不知道我做错了什么。任何帮助都将不胜感激。

您正在呈现

仪表板
组件内部的
导航栏
，这就是您一直看到该组件的原因。尝试从
仪表板
组件中删除
导航栏
，并将其用作应用程序入口点

要进一步说明，请从仪表板上拆下此零件：

 return (
      <div>
          /* Remove these lines
           *<header>
           *  <NavBar username={data.username} user_id={data.id} />
           *</header>
           */
        {isData ? (

查看此StackBlitz了解一个工作示例。
您可以使用它来创建一个有意义的工作示例，但仪表板会获取初始加载的数据并将数据传递给导航栏，因此
this.props.username
@ergunplat要么将此逻辑传输到导航栏中，我不建议这样做，或者将导航栏包装在另一个具有此数据检索逻辑的组件中，然后该组件可以将必要的道具传递给导航栏。这个包装器将成为您的新入口点。好的，我所做的是将数据提取移动到App.js，并将navbar组件添加到App.js，并将数据作为道具传递到navbar，在navbar中，我将数据传递到仪表板组件
render(<NavBar />, document.getElementById('root'))