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声明的位置。

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

1 个答案: