Как использовать реагирующий роутер

Question

Я создаю приложение, которое имеет разные страницы, и мне было интересно, как я смогу реструктурировать мои маршруты. Я хочу загрузить компонент входа в систему в '/', и у меня есть this.props.history.push ("/ homepage") на странице входа, которая открывает домашнюю страницу при успешном входе в систему, у меня есть навигационная панель на домашней странице с различными ссылками, я бы обратился к загрузке компонентов на домашней странице при нажатии на ссылки, и я хочу, чтобы навигационная панель оставалась только на домашней странице, и загрузка компонента была бы следующейк этому. Я новичок, чтобы отреагировать. Какое лучшее решение для такого сценария.

код navbar

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

homepage

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

это мое приложение.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 откроет компонент домашней страницы.

Внутри домашней страницы вы можете иметь Navbar и дочерние маршруты домашней страницы, такие как:

/homepage/profile, /homepage/item и т. Д.

Вот одна статья, чтобы копнуть глубже: https://medium.com/@marxlow/simple-nested-routes-with-layouts-in-react-router-v4-59b8b63a1184