使用 React Router 更改 URL 但组件未呈现？

Question

我正在设置一个 React 应用程序来使用 React Router。当我单击左侧的 Volunteers 标头时，URL 会发生变化，但组件不会呈现。我应该如何设置？

我尝试将 Routes 放在 SidePanel 组件中，但我不希望 React Router 渲染的组件成为 SidePanel 的子级，而是兄弟级。

我的应用组件：

// system imports
import React from "react";
import { BrowserRouter, Route} from "react-router-dom";

// custom components
import SidePanel from "./SidePanel.js";
import VolunteerCombo from "./VolunteerCombo.js";
import RegistrantsCombo from "./RegistrantsCombo.js";
import Assignments from "./Assignments.js";
import ActionLog from "./ActionLog.js";

// css files
import "../css/App.css";
import "../css/ActivePanel.css";
import "../css/MenuPanel.css";

export class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="main_container">
        <SidePanel/>
        <BrowserRouter>
          <Route path="/volunteers" component={VolunteerCombo}></Route>
          <Route path="/registrants" component={RegistrantsCombo}></Route>
          <Route path="/assignments" component={Assignments}></Route>
          <Route path="/action_log" component={ActionLog}></Route>
        </BrowserRouter>
      </div>
    );
  }
}

还有我的 SidePanel 组件：

// system imports
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";

// custom components


// css files
import "../css/SidePanel.css";

class SidePanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: ""
    };
  }

  render() {
    return (
      <div className="side_panel">

      <BrowserRouter>

        <h3 style={{paddingTop: "3%"}}>Chase Grainger</h3>
        <p className="ui button">Log Out</p>
        <div className="ui divider"></div>

        <Link to="/volunteers">
          <h4 className="side_button">Volunteers</h4>
        </Link>


        <h4 className="side_button">Registrants</h4>
        <h4 className="side_button">Assignments Mode</h4>
        <div className="ui divider"></div>

        <h4 className="side_button">Action Log</h4>

        </BrowserRouter>
      </div>
    );
  }
}

export default SidePanel;

我希望我的 VolunteerCombo 组件会在我单击左侧的 Volunteers 时出现，但尽管 URL 已更改，但该组件并未呈现。

Answer 1

首先，你需要有一个BrowserRouter。 SidePanel 也需要在 BrowserRouter 下。

所以总的来说，你需要多一个组件。

<BrowserRouter>
  <Route path="/" component={Layout} />
</BrowserRouter>

在 Layout.js 中

<div>
  <SidePanel />
  <Switch>
    ...your routes
  </Switch>
</div>

并将 withRouter HOC 用于 SidePanel。