React router routes don't match location

user_19044285 0
Viewed 127

Unsure why this isn't working? Everything has been imported correctly so am unsure why I get the following error message in the console:

No routes matched location "/"

App.jsx

import './App.css';
import React from 'react';
import Home from './pages/Home';
import Explore from './pages/Explore';
import { BrowserRouter as Router, Routes, Route, useRoutes} from "react-router-dom";
// import { useState } from "react";

const App = () => {
  let routes = useRoutes([
      <Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="/explore" exact element={<Explore />}/>
      </Routes>
  ])
  return routes;
}

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

export default AppWrapper;

And the Home file

import React from 'react';
import { useNavigate } from "react-router-dom";

const Home = () => {
    const navigate = useNavigate();
    return (
        
        <div>
            <div>
                <button onClick={() => {navigate("/explore");}}>  
                    Explore page
                </button>
                <h1>Home page</h1>
            </div>
        </div>
    );
}

export default Home;
react-router-dom reactjs
2 Answers

According to the documentation of useRoutes() from here, you're using the hook in an incorrect manner.

You can use the traditional way of doing routing with react-router-dom, as follows:

const App = () => {
  return (
    <Routes>
      <Route path="/" exact element={<Home />} />
      <Route path="/explore" exact element={<Explore />} />
    </Routes>
  )
}

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  )
}

If you really want to use useRoutes, I encourage you to look into the example sent in the link from above.

user_162334250

The useRoutes hook takes a routes configuration object. Your code is passing JSX. This is an invalid use of the useRoutes hook.

useRoutes

The two methods for rendering routes:

  1. Use the useRoutes hook with routes configuration object.

    const routesConfig = [
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/explore",
    element: <Explore />
  },
];

const App = () => {
  const routes = useRoutes(routesConfig);
  return routes;
};

  2. Render the JSX directly.

    const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/explore" element={<Explore />}/>
    </Routes>
  );
};
user_86908570
Related