0

I'm learning React and I'm trying to create a quiz app. However, I am having issues with redirecting to another component on button click.

I keep getting this error

useNavigate() may be used only in the context of a <Router> component.

This is my code

App.js

import React from 'react';
import Home from "./component/Home";

export default function App() {
  return (
    <main>
      <Home />
    </main>
  );
}

component/Home.js

import React from "react";
import ResponsiveAppBar from "./ResponsiveAppBar";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useNavigate,
} from "react-router-dom";

import Typography from "@mui/material/Typography";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import img from "./../assets/images/earth.jpg";

const Home = (props) => {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/Learn");
  }

  function secondHandleClick() {
    navigate("/Quiz");
  }
  return (
    <div>
      <Router>
        <ResponsiveAppBar />

        <Typography variant="h6" component="div">
          EARTH
        </Typography>
        <Avatar
          variant={"rounded"}
          alt="The Earth"
          src={img}
          style={{
            width: 200,
            height: 200,
          }}
        />
        {/* <img  src={'/assets/images/earth.jpg'} alt ='The Earth'/> */}
        <Typography variant="h6" component="div">
          Earth apart from being our home, has a lot of cool fun facts you are
          probably not aware of. Not to worry, we are gonna get to know some of
          these facts today. Click the Learn button to start or the Quiz button
          to check how much you already know.
        </Typography>
        <Routes>
          <Button variant="contained" onClick={handleClick}>
            Learn
          </Button>
          <Button variant="contained" onClick={secondHandleClick}>
            Quiz
          </Button>
        </Routes>
      </Router>
    </div>
  );
};
export default Home;

Where am I missing it? I'd appreciate some help.

Lin Du
  • 88,126
  • 95
  • 281
  • 483
Prisca Chidimma
  • 31
  • 1
  • 7

1 Answers1

3

I think this post answer to your issue: useNavigate() may be used only in the context of a <Router> component

So you should refactor to this:

App.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Home from "./component/Home";

export default function App() {
  return (
    <BrowserRouter>
      <main>
        <Home />
      </main>
    </BrowserRouter>
  );
}

(or inside the <main>)

and this: component/Home.js

...
import {
  Routes,
  Route,
  useNavigate,
} from "react-router-dom";
...
  return (
    <div>
      <ResponsiveAppBar />

      <Typography variant="h6" component="div">
        EARTH
      </Typography>
      <Avatar
        variant={"rounded"}
        alt="The Earth"
        src={img}
        style={{
          width: 200,
          height: 200,
        }}
      />
      {/* <img  src={'/assets/images/earth.jpg'} alt ='The Earth'/> */}
      <Typography variant="h6" component="div">
        Earth apart from being our home, has a lot of cool fun facts you are
        probably not aware of. Not to worry, we are gonna get to know some of
        these facts today. Click the Learn button to start or the Quiz button
        to check how much you already know.
      </Typography>
      <Routes>
        <Button variant="contained" onClick={handleClick}>
          Learn
        </Button>
        <Button variant="contained" onClick={secondHandleClick}>
          Quiz
        </Button>
      </Routes>
    </div>
  );
};
export default Home;

Also, if your onClick functions are only there to run navigate you can write directly

<Button variant="contained" onClick={() => navigate('')}>
Tolsk
  • 72
  • 1