为什么我的 React Router 组件采用了错误的样式？

Question

我正在使用 react-router，我将它作为自己的组件分离出来，它工作正常，但唯一的问题是来自该路由页面的文本出现在导航栏中。我是 React 的新手，所以如果我做错了什么可以做得更好，我很想知道！代码沙盒

Answer 1

你可以Switch搬到Home.js：

import React from "react";

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import HomeNav from "./NavBar";

import "./NavBar.css";

import Account from "./Account";

import Friends from "./Friends";

class Home extends React.Component {

  render() {

    return (

      <div>

      <Router>

        <HomeNav />

        <h1>

          "this is the friends/account tab" <br />text should be here

        </h1>

          <Switch>

            <Route path="/account" component={Account} />

            <Route path="/friends" component={Friends} />

          </Switch>

      </Router>

      </div>

    );

  }

}

export default Home;

只放链接Routing.js

class Routing extends React.Component {

  render() {

    return (

        <div>

          <ul>

            <li>

              <Link to="/friends">friends</Link>

            </li>

            <li>

              <Link to="/account">account</Link>

            </li>

          </ul>

        </div>

    );

  }

}

据我了解，组件仅在Switch声明的位置显示。