реагировать маршрутизатор показать корневой компонент, а также маршрутизируемый путь

Question

Я сейчас новичок в React и пытаюсь использовать React Router.Но у меня возникла проблема, когда отображается компонент верхнего уровня, а также компонент в пути.В моем App.js у меня есть компонент Dashboard, у которого есть компонент NavBar и мой маршрутизатор там.

Вот мой компонент Dashboard

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>
    );
  }
}

А вот мой компонент NavBar

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>
    );
  }
}

Компонент History и Account имеет только простой тег H1.Всякий раз, когда я перемещаюсь к этим компонентам, также загружается мой компонент панели мониторингаНе уверен, что я делаю не так.Любая помощь будет высоко ценится.

Answer 1

Вы визуализируете NavBar внутри компонента Dashboard, поэтому вы также продолжаете видеть этот компонент.Попробуйте удалить NavBar из компонента Dashboard и использовать его в качестве точки входа ваших приложений.

Чтобы уточнить, удалите эту часть из Dashboard:

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

И просто визуализируйте Navbar, например так:

render(<NavBar />, document.getElementById('root'))

Проверьте этот StackBlitz ссылка для рабочего примера.