React routing to endpoint but not rendering content

Question

I can route to another endpoint, but the component content only appears on manual refresh.

I've seen this question asked here, here, and I've been checking out the reactrouter docs, amongst others. The solution always seems to be "add withRouter" or "make sure you're wrapping it in Router. I've done those things, but sadly got no where.

Here's the code:

App.js

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Provider store={store}>
        <div className="App">
          <NavBar />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/account" component={Account} />
          </Switch>
        </div>
      </Provider>
    </Router>
  );
}

NavBar.js

import { BrowserRouter as Router, Link } from "react-router-dom";
import { withRouter } from "react-router";

function NavBar() {
  return (
    <Router>
      <div className="navbar">
        <h3>Connectory</h3>
        <div className="buttons-container">
          <Link>
            <button>Settings</button>
          </Link>
          <Link to="/account"> // successfully redirects to /account, but doesn't render Account page content until refresh
            <button>Account</button>
          </Link>
        </div>
      </div>
    </Router>
  );
}

export default withRouter(NavBar);

EDIT: After comment suggestions, here's a code sandbox link and here;s the Account.js page:

import React from "react";

export default function Account() {
  return (
    <div>
      <h3>This is the Account page</h3>
    </div>
  );
}

your code seems ok, try to create a code sandbox demo so we could see the whole picture — Taghi Khavari, Jan 19 '21 at 10:48
Could you please add the code for Account so that we can check if it is correct ? — letibelim, Jan 19 '21 at 10:49
@TaghiKhavari [here you go](https://codesandbox.io/s/prod-paper-3jmcb?fontsize=14&hidenavigation=1&theme=dark) — crevulus, Jan 19 '21 at 10:55

score 1 · Accepted Answer · answered Jan 19 '21 at 11:09

1

The Problem here is that, in your Navbar.js, you are re-setting your Routes again when they are already set in App.js.

  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/account" component={Account} /> // Route for Applicatin set here
  </Switch>

You do not need to do that again in. Check here.

https://codesandbox.io/s/gracious-germain-7fyry?file=/src/Navbar.js

Your Nabar should look like:

function NavBar() {
  return (
    <div className="navbar">
      <h3>Connectory</h3>
      <div className="buttons-container">
        <Link to="/">
          <button>Settings</button>
        </Link>
        <Link to="/account">
          <button>Account</button>
        </Link>
      </div>
    </div>
  );
}

answered Jan 19 '21 at 11:09

Imran Rafiq Rather

5,459
1
9
30

thanks, this solved it. I'm pretty sure I tried that before and got an error that said "You can't use `Link` outside of `Router`", but maybe at that point I'd wrapped the main App component incorrectly. – crevulus Jan 19 '21 at 11:12
This is programming, things does break and then we fix them :-) . By the way from `React-router-dom-5` onwards, the things have changed a bit ( Making use of Hooks, and Route setting is a bit different and more performant now). Do have a look , you will enjoy that :-) https://reactrouter.com/web/guides/quick-start CHEERS – Imran Rafiq Rather Jan 19 '21 at 11:17

rubendmatos1985 · Answer 2 · 2021-01-19T11:45:18.280

Hi i found a bug in your code and that's the reason because is not working.

in this component you are injecting the Router to the rest of the app.

    function App() {
  return (
    <Router>
      <div className="App">
        <NavBar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/account" component={Account} />
        </Switch>
      </div>
    </Router>
  );
}

in this one you are injecting again the Router. That's why is not working you just have to remove the Router from de Navbar and it will work properly.

    function NavBar() {
  return (
    <Router>
      <div className="navbar">
        <h3>Connectory</h3>
        <div className="buttons-container">
          <Link>
            <button>Settings</button>
          </Link>
          <Link to="/account">
            <button>Account</button>
          </Link>
        </div>
      </div>
    </Router>
  );
}

like this

 function NavBar() {
  return (
      <div className="navbar">
        <h3>Connectory</h3>
        <div className="buttons-container">
          <Link>
            <button>Settings</button>
          </Link>
          <Link to="/account">
            <button>Account</button>
          </Link>
        </div>
      </div>
  );
}

Thank you! Imran shared a similar solution above and you are indeed correct, that's the solution! — crevulus, Jan 19 '21 at 13:02

React routing to endpoint but not rendering content

2 Answers2