Webpage not loading as expected from implementing react-router-dom

Question

I have installed 'react-router-dom' and 'react', and am trying to implement a routing feature. I have also added 'react-router-dom' to my devDependencies within the package.json. However, the issue is that the routing feature is not working as expected.

Here's the code to the Navbar component with some slight edit (which is copied directly from bootstrap https://getbootstrap.com/docs/5.3/components/navbar/) which implements this feature:

import { Link } from 'react-router-dom';

const Navbar= () => {
    return (
      <nav className="navbar navbar-expand-lg bg-body-tertiary">
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">Movie Browser</Link>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Link className="nav-link active" aria-current="page" to="/">Home</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/about">About</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link disabled">Coming soon</Link>
              </li>
            </ul>
            <form className="d-flex" role="search">
              <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
              <button className="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
    );
  }

export default Navbar;

Based on the code above, clicking on the equivalent tags in the webpage should load up another path I have created, i.e. either "/" or "/about".

However, clicking does not work as the webpage does not render anything new and sticks to the same content, i.e. the component. However, the url on top of the webpage does change accordingly. Only when I manually enter the url does the webpage start rendering properly to the component.

I'd like to seek advice on what is the issue here.

Here's also the code within the default App.js that uses the Navbar component:

import './App.css';
import Navbar from './components/Navbar';
import Home from './components/Home';
import AboutView from './components/AboutView';
import { Switch, Route } from "react-router-dom";

function App() {
  return (
    <div>
      <Navbar />
      <Switch>
        <Route path="/" exact>
          <Home />
        </Route>
        <Route path="/about" component={AboutView}/>
      </Switch>
    </div>
  );
}

export default App;

Here's the code within the default index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
reportWebVitals();

Below is an image of the issue I am facing:

But the intended effect should be:

Here are the versions for my react and react-router-dom:

Thank you.

Credit to @Konrad for the reference link: https://stackoverflow.com/questions/71832720/link-tag-inside-browserrouter-changes-only-the-url-but-doesnt-render-the-compo — Ken, Jul 16 '23 at 20:06

score 0 · Answer 1 · answered Jul 16 '23 at 16:50

0

Based on this example and the code you've shared, you may be missing the BrowserRouter component that should wrap both the navbar and the content:

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

and then something like

    <Router>
      <Navbar />
      <Switch>
        <Route path="/about">
          ...
        </Route>
        <Route path="/">
          ...
        </Route>
      </Switch>
    </Router>

To solve the "implicitly has any type" error that shows up in your editor, following the instructions in the hint (trying the npm i command) may help.

answered Jul 16 '23 at 16:50

Wander Nauta

18,832
1
45
62

Hi @WanderNauta thank you for the quick response. I have tried to add that to the import, and my code editor just shows the Router import not being used. On the other hand, the first problem about 'react-router-dom' not being detected is addressed after adding it to devDependencies. The second issue is not. I have removed the first problem and left the second issue on my post. Thank you. – Ken Jul 16 '23 at 17:29
Good to hear that the first issue is now fixed. For the second issue, you will definitely have to import _and use_ the Router, not just import it and leave it unused. It should wrap both the navbar and the content/``. – Wander Nauta Jul 16 '23 at 17:34
Okay got it. I wrapped and within it. The link still doesn't work :( – Ken Jul 16 '23 at 17:39

Webpage not loading as expected from implementing react-router-dom

1 Answers1