Can't route to another page in reactjs

Question

I am having trouble routing to another page. When clicking the route it changes the link but stays on the same. Sorry in advance I'm a beginner. Here is a picture of the website and my code for the route page.

import React from "react";

    const Blank2 = () => {
      return <main id="mainContent">
        <div className="container">
          <div className="row justify-content-center mt-5 p-0">
            <h3>Blank2</h3>
          </div>
        </div>
      </main>
    }
    export default Blank2;

my app.js

    import React from "react";
    import { Routes ,Route } from 'react-router-dom';
    import "./App.css";
    import NavBar from "./components/NavBar/NavBar";
    import Footer from "./components/Footer/Footer";
    
    import VolcanoInfo from "./components/VolcanoInfo/VolcanoInfo";
    
    import Blank1 from "./components/Blank1/Blank1";
    
    import Blank2 from "./components/Blank2/Blank2";
    
    import Blank3 from "./components/Blank3/Blank3";
    
    import image from './image.jpg';
    
    //TODO Web Template Studio: Add routes for your new pages here.
    const App = () => {
        return (
          
          <React.Fragment>
            <NavBar />
            <Routes>
              <Route exact path = "/VolcanoInfo" component = { VolcanoInfo } />
              <Route path = "/Blank1" component = { Blank1 } />
              <Route path = "/Blank2" component = { Blank2 } />
              <Route path = "/Blank3" component = { Blank3 } />
            </Routes>
            <Footer />
          </React.Fragment>
        );
    }
    
    <header className="App-header">
      <img src={image} className="image" alt="image" />
    </header>
    
    
    export default App;

website

Answer 1

For React Router v6, there are couple of things being done wrong here. You need to replace component with element and make use of BrowserRouter or HashRouter. Also we don't need exact from react-router v6. Your code would look something like this

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

...

<BrowserRouter>
   <NavBar />
   <Routes>
      <Route path = "/VolcanoInfo" element= { <VolcanoInfo /> } />
      <Route path = "/Blank1" element = { <Blank1 /> } />
      <Route path = "/Blank2" element = { <Blank2 /> } />
      <Route path = "/Blank3" element = { <Blank3 /> } />
   </Routes>
   <Footer />
</BrowserRouter>

Answer 2

I see that you're using react-router-dom v6. React Router Dom is actually easy to use but sometimes we can get mixed up with the older version.

Here's the link to the official v6 document on configuring routes.

• You need to have a <BrowserRouter> wrap over your routes.
• Instead of component attribute, v6 uses element and then pass in the component you want to route. (Ex: element={<Blank1 />})

More details in the documentation above. Hope this helps!

Answer 3

Tutorial for React Router v6 in here. And many change from v5 to v6 according to this doc :

import React from "react";
import { BrowserRouter, Routes ,Route } from 'react-router-dom';
import "./App.css";
import NavBar from "./components/NavBar/NavBar";
import Footer from "./components/Footer/Footer";

import VolcanoInfo from "./components/VolcanoInfo/VolcanoInfo";

import Blank1 from "./components/Blank1/Blank1";

import Blank2 from "./components/Blank2/Blank2";

import Blank3 from "./components/Blank3/Blank3";

import image from './image.jpg';

//TODO Web Template Studio: Add routes for your new pages here.
const App = () => {
    return (
      
      <BrowserRouter>
        <header className="App-header">
           <img src={image} className="image" alt="image" />
        </header>
        <NavBar />
        <Routes>
          <Route path = "/VolcanoInfo" element= { <VolcanoInfo /> } />
          <Route path = "/Blank1" element= { <Blank1 />} />
          <Route path = "/Blank2" element= { <Blank2 />} />
          <Route path = "/Blank3" element= { <Blank3 />} />
        </Routes>
        <Footer />
      </BrowserRouter>
    );
}




export default App;