Javascript URL随React路由器更改，但组件未呈现？

我正在设置一个React应用程序来利用React路由器。当我单击左侧的志愿者标题时，URL会更改，但组件不会呈现。我应该如何设置

我尝试将路由放在侧面板组件中，但我不希望React Router渲染的组件是侧面板的子组件，而是同级组件

我的应用程序组件：

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

// 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;

//系统导入
从“React”导入React；
从“react router dom”导入{BrowserRouter，Route}；
//自定义组件
从“/SidePanel.js”导入侧面板；
从“/voluntercombo.js”导入志愿者组合；
从“/registantscombo.js”导入注册人scombo；
从“/Assignments.js”导入工作分配；
从“/ActionLog.js”导入ActionLog；
//css文件
导入“./css/App.css”；
导入“./css/ActivePanel.css”；
导入“./css/MenuPanel.css”；
导出类应用程序扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}

和我的侧面板组件：

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

// 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;

//系统导入
从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Link}；
//自定义组件
//css文件
导入“./css/SidePanel.css”；
类侧面板扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“
};
}
render（）{
返回(
蔡斯·格兰杰
注销
志愿者
注册人
分配模式
动作日志
);
}
}
导出默认侧面板；

---

当我单击左侧的志愿者时，我希望我的志愿者组合组件会出现，但尽管URL发生了更改，但该组件没有呈现。

首先，您需要一个BrowserRouter。侧面板也需要在BrowserRouter下安装

所以总的来说，您还需要一个组件

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

在Layout.js中

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

…你的路线

---

并与路由器HOC一起用于侧面板。

该值未被推送到历史记录中，请参阅：如果我希望侧面板始终可见，是否仍可以使用该值？是的，当然。侧面板将始终可见。我最后不得不将侧面板移到我的第一个路由声明的正上方，BrowserRouter内部。谢谢你的帮助，菲利普！