Question

我正在构建一个具有不同页面的应用程序，我想知道如何重新构造我要在'/'上加载登录组件的路由，并且我拥有this.props.history.push（“ / homepage” ）在登录页面上，该页面在成功登录后打开了主页，我在主页中有一个带有不同链接的导航栏，当单击链接时，我想解决在主页中加载组件的问题，并且我希望导航栏仅保留在主页中并加载组件我是新来的。这种情况下最好的解决方案是什么。

导航栏代码

import React, { Component } from "react";
import jwt_decode from "jwt-decode";
import { Link, withRouter } from "react-router-dom";

class Navbar extends Component {
  logOut(event) {
    event.preventDefault();
    localStorage.removeItem("usertoken");
    this.props.history.push("/login");
  }
  render() {
    return (
      <ul style={navBarStyle} id="sidenav-1" className="sidenav sidenav-fixed">
        <li>
          <h1 className="center-align" style={{ fontSize: "30px" }}>
            Hello
          </h1>
        </li>
        <li>
          <Link to="/profile">
            <i style={linkStyle} className="material-icons ">
              person
            </i>
          </Link>
        </li>
        <li>
          <a href="https://twitter.com/MaterializeCSS" target="_blank">
            <i style={linkStyle} className="material-icons ">
              book
            </i>
          </a>
        </li>
        <li>
          <Link to="/searchcourse">
            <i style={linkStyle} className="material-icons">
              search
            </i>
          </Link>
        </li>
        <li style={linkStyle}>
          <a href="" onClick={this.logOut.bind(this)}>
            <i style={linkStyles} className="fas fa-sign-out-alt" />
          </a>
        </li>
      </ul>
    );
  }
}

主页

class Homepage extends Component {
  componentDidMount() {
    document.title = "Dashboard";
  }
  render() {
    return (
      <div>
        <Navbar />
        <div className="container">
          <div>
            <h3>Dashboard</h3>
            <hr />
          </div>
          <div className="col" />
        </div>
      </div>
    );
  }
}

这是我的app.js

<BrowserRouter>
<Route path="/login" component={Login} />
          <Route path="/register" component={Register} />
          <Route path="/homepage" component={Homepage} />
          <Route exact path="/profile" component={Profile} />
          <Route exact path="/searchcourse" component={SearchHelper} />
          <Route exact path="/item" component={CourseItem} />
</BrowserRouter>

Answer 1

您可以使用嵌套路由。将特定于主页的子路由保留在“主页”组件中。这样，路由/homepage将打开“主页组件”。

在首页内部，您可以拥有导航栏和首页的子路径，例如：

/homepage/profile，/homepage/item等

这里有一篇要深入研究的文章：https://medium.com/@marxlow/simple-nested-routes-with-layouts-in-react-router-v4-59b8b63a1184

如何使用React Router

1 个答案: