Question

我正在设置一个React应用来利用React Router。单击左侧的“志愿者”标头后，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>

并在SidePanel中使用withRouter HOC。

URL是否随React Router更改但组件未呈现？

1 个答案: