During click on the back button in the react hooks web app, it is not navigating to the Home page-CodePudding

While navigating back in the react hooks web app, it is not displaying the Home page.Do I need to include anything else, could someone please advise here ? I couldn't see any errors in console.

CSB link added:

https://codesandbox.io/s/blue-sun-rhog82?file=/src/components/home.js

import Select from "react-select";
import { useNavigate } from "react-router-dom";
const options = [
  { value: "[email protected]", label: "[email protected]" },
  { value: "[email protected]", label: "[email protected]" },
  { value: "[email protected]", label: "[email protected]" }
];

const Register = () => {
  const navigate = useNavigate();

  const moveBack = () => {
    navigate("home");
  };

  return (
    <div className="wrapper">
      <h1>Lets us Know</h1>
      <form>
        <input type="text" name="candiate" /> <br></br>
        <br></br>
        <input type="text" name="mobile" /> <br></br>
        <br></br>
        <Select isMulti options={options} />
        <br></br>
        <textarea></textarea>
        <hr></hr>
        <button>Submit</button>
        <button onClick={moveBack}>Back</button>
      </form>
    </div>
  );
};
export default Register;

App.js

import "./styles.css";
import { BrowserRouter, Route, Routes, Switch } from "react-router-dom";
import Home from "./components/home";
import Register from "./components/register";

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {/* <Navigation /> */}
        <Routes>
          <Route path="/" element={<Home />}></Route>
        </Routes>
        <Routes>
          <Route path="/Register" element={<Register />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

CodePudding user response：

Your issue is:

const moveBack = () => {
    navigate("home");
  };

Change it to:

const moveBack = () => {
    navigate("/");
  };

You've specified your </Home> component's rendering route as the root of the directory:

<Route path="/" element={<Home />}></Route>

So nothing was going to render when you navigated to /Home.

Hope this helps.