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.