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

Posted 2023-02-22

【中文标题】使用 React Router 更改 URL 但组件未呈现？

【英文标题】：URL changes with React Router but component not rendering?

【发布时间】：2019-11-30 19:21:18

【问题描述】：

我正在设置一个 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 已更改，但该组件并未呈现。

【问题讨论】：

值没有被推送到历史，参考：***.com/questions/42701129/…

【参考方案1】：

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

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

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

在 Layout.js 中

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

并将 withRouter HOC 用于 SidePanel。

【讨论】：

如果我希望 SidePanel 始终可见，我还能使用它吗？

是的，当然。侧面板将始终可见。

我最终不得不将我的 SidePanel 移动到我的第一个 Route 声明的正上方，在 BrowserRouter 内。感谢菲利普的帮助！