Why my components don't display on my React page?

Question

So I'm learning React and building an app with multiple pages, I made a Routes file which looks like this:

import 'swiper/swiper.min.css';
import React from "react";

import { Route, Routes } from "react-router-dom";

import Home from "../pages/Home";
import Catalog from "../pages/Catalog";
import Detail from "../pages/Detail";

const Router = () => {
    return (
        <Routes>
            <Route
                path='/:category/search/:keyword'
                component={Catalog}
            />
            <Route
                path='/:category/:id'
                component={Detail}
            />
            <Route
                path='/:category'
                component={Catalog}
            />
            <Route
                path='/'
                exact
                component={Home}
            />
        </Routes>
    );
}

And App.js looks like this:

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import Header from './components/header/Header';
import Footer from './components/footer/Footer';

import Router from './config/Router';

function App() {
  return (
    <BrowserRouter>
    <Routes>
    <Route render={props =>{
          <>
              <Header {...props}/>
              <Router/>
              <Footer/>
          </>
      }}/>
    </Routes>
    </BrowserRouter>
  );
}

export default App;

As you see, I have a browser router and Route which passes props to a component(as I understood) but for some reason the components don't display on the page(original components just have with their name inside of them, but they don't display in App.js).

And my console also says:

No routes matched location "/"

In routes.jsx file. I'm guessing it should lead to main page, but for some reason the route doesn't match and components in App.js don't display.

Answer 1

As you've said you're using react-router-dom 6.0.2, and it seems that the tutorial you are following is for the older version (5?). There were some breaking changes in version 6.

You need to change your Router component to use element instead of component:

const Router = () => {
  return (
    <Routes>
      <Route path="/:category/search/:keyword" element={<Catalog />} />
      <Route path="/:category/:id" element={<Detail />} />
      <Route path="/:category" element={<Catalog />} />
      <Route path="/" exact element={<Home />} />
    </Routes>
  );
};

and also your App component seems to be getting in the way with the nested route.

I think it can be simplified to:

function App() {
  return (
    <BrowserRouter>
      <>
        <Header />
        <Router />
        <Footer />
      </>
    </BrowserRouter>
  );
}

You can see a working demo on stackblitz

Answer 2

In Version 6.0.0 there is not any component prop in Route. It has been changed to element. So you need to change your Router to :

 const Router = () => {
    return (
        <Routes>
            <Route
                path='/:category/search/:keyword'
                element={Catalog}
            />
            <Route
                path='/:category/:id'
                element={Detail}
            />
            <Route
                path='/:category'
                element={Catalog}
            />
            <Route
                path='/'
                exact
                element={Home}
            />
        </Routes>
    );
}