URL changes with React Router but component not rendering?

Question

I'm setting up a React app to utilize React Router. The URL changes when I click the Volunteers header on the left, but the component does not render. How should I set this up?

I've tried to put the Routes in the SidePanel component, but I don't want the components to be rendered by React Router to be children of SidePanel, but siblings.

My App Component:

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

And my SidePanel Component:

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

I expected my VolunteerCombo component to show up when I clicked Volunteers on the left side, but the component did not render although the URL changed.

The value is not being pushed to history, refer to: https://stackoverflow.com/questions/42701129/how-to-push-to-history-in-react-router-v4 — Nicolas Kao, Jul 22 '19 at 19:31

score 1 · Answer 1 · answered Jul 22 '19 at 19:34

1

First of all, you need to have one BrowserRouter. SidePanel also needs to under BrowserRouter.

So overall, you need to have one more component.

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

in Layout.js

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

And use withRouter HOC for SidePanel.

answered Jul 22 '19 at 19:34

Philip Moy

481
3
6

Can I still use this if I want SidePanel to always be visible? – rowlandev Jul 22 '19 at 23:25
Yes, sure. SidePanel will always be visible. – Philip Moy Jul 23 '19 at 00:16
I ended up having to just move my SidePanel right above my first Route declaration, inside of BrowserRouter. Thanks for the help Philip! – rowlandev Jul 23 '19 at 03:27

URL changes with React Router but component not rendering?

1 Answers1