反应路由器显示根组件以及路由路径

Question

我目前是 React 新手，正在尝试使用 React Router。但是我遇到了显示顶级组件以及路径中的组件的问题。在我的 App.js 中，我有一个仪表板组件，它有一个 NavBar 组件，并且我的路由器在那里。

这是我的仪表板组件

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

您在Dashboard 组件内渲染NavBar，这就是为什么您也一直看到该组件的原因。尝试从Dashboard 组件中删除NavBar 并将其用作您的应用程序入口点。

为了进一步详细说明，请从仪表板中删除此部分：

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

然后渲染你的Navbar，像这样：

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

查看这个 StackBlitz link 以获得一个工作示例。