React Router changes URL but does not automatically render component

Question

I'm attempting to use React Router to allow a button in my NavBar to change the view when a button is clicked. Specifically, I want an "Upload" button to change the URL to /upload and render the UploadPage component.

Currently, the URL will change, but the view does not automatically render, and the 'old' component is still visible. I need to manually reload the page or go to the URL directly for the view to load. How can I stop this behaviour so that it automatically renders without manual reload?

App.js:

import { Component } from "react";
import Home from "../src/components/Component/Home/Home";
import Header from "./components/Component/Header/Header";
import UploadPage from "./components/Component/VideoUpload/VideoUpload";
import { BrowserRouter, Switch, Route } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Header />
        <Switch>    
          <Route path="/" exact component={Home} />
          <Route
            path="/video/:videoId"
            component={Home}
            render={(routerProps) => <Home {...routerProps} />
          />
          <Route path="/upload" component={UploadPage} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

Header.js (This is a snippet of just the button in the NavBar)

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

const Header = () => {
    return (
        //NavBar code here...

        <Link to="/upload">
        <button>
            <img draggable="false" src={uploadIcon} alt="upload-icon" />
            UPLOAD
        </button>
        </Link>
    );
};

VideoUpload.js

import React from "react";

const VideoUpload = () => {
  return (
    <section className="uploadContainer">
      <section className="uploadContainer__titleContainer">
        <h2 className="uploadContainer__title">Upload Video</h2>
      </section>
    </section>
  );
};

export default VideoUpload;

Thanks for the edit @amputator. I deleted my answer as it doesn't seem to be the correct answer. — Youssouf Oumar, Jul 10 '22 at 13:35
What does "renders not automatically" look like, does the old component/page stay or do you get a white page? — Palladium02, Jul 10 '22 at 13:37
@Palladium02 The old component stays. I have to manually reload to view the Upload page after button press. No white pages, though. — amputator, Jul 10 '22 at 13:39
Hi, All. I just posted an answer that fixes my issue - why it works; I'm not too sure. Must be something to do with . Thanks for all your help! — amputator, Jul 10 '22 at 14:05

score 2 · Answer 1 · answered Jul 10 '22 at 14:04

After a lot of trial and error and research, I found that in my index.js:

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

Should be changed to:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

From my tests, <BroswerRouter> isn't necessary here and <App /> doesn't need to be wrapped for it to work, but, I'm keeping it wrapped just in case.

This fixes the issues I was experiencing.

React Router changes URL but does not automatically render component

1 Answers1

Linked