React-router-dom Link change the URL but it doesn't render the component in Rect JS

Question

I am using React js components and want to render something by access some URL so problem is when i click on the Link it change the URL but does not render the component, I have to refresh the page so that it render (as i said URL changes) I am access URL http://localhost/3000/product/32423432wew23 the URL change to this and refresh the page it render the product of this id, BUT BY REFRESHING THE PAGE.

App.js

import "./App.css";

import { Provider } from "react-redux";
import store from './store';
import MainRoute from "./Route/MainRoute";
import {BrowserRouter as Router} from "react-router-dom"
function App() {
  
  return (
    <Router>
      <Provider store={store}>
        <MainRoute/>   
      </Provider>
    </Router>
  );
}

export default App;

MainRoute.js

import React,{useState,useEffect} from "react";
import  { Alert }  from "../Components/Alert";
import { BrowserRouter as Router, Switch, Route,Redirect } from "react-router-dom";
// import HomePage from "../Components/Pages/HomePage";
import Login from '../Components/Login/Login';
import SignUp1 from '../Components/Signup/SignUp1';
import ForgotPassword1 from "../Components/ForgotPassword/ForgotPassword1";
// import Profile from "../Components/Pages/Profile";
import { AddPost } from "../Components/AddPost/AddPost";
import Navbar from "../Components/Navbar/Navbar";
// import {DetailProduct} from "../Components/Pages/DetailProduct";
import Footer from "../Components/Footer/Footer";
import Banner from "../Components/Banner/Banner";
import { Products } from "../Components/Products/Products";
import { EditProfile } from "../Components/EditProfile/EditProfile";
import { DetailProductPage } from "../Components/DetailProductPage/DetailProductPage";
import { useDispatch } from 'react-redux';
import {getProducts} from "../Actions/products"
import { UploadProduct } from "../Components/UploadProduct/UploadProduct";
import MyPosts from "../Components/MyPosts/MyPosts";

const MainRoute = () => {

  const [alert, setalert] = useState(null);

  const showAlert = (message, type) => {
    setalert({
      msg: message,
      type: type,
    });
    setTimeout(() => {
      setalert(null);
    }, 1500);
  };


  return (
    <>
      <Navbar showAlert={showAlert} />
        <Switch>
          <Router  exact path="/" component={() => <Redirect to="/products" />}>
          </Router>
          <Router  exact path="/products">
            <Banner/>
            <Products/>   
          </Router>
          <Route exact path="/login">
            <Login showAlert={showAlert} />
          </Route>
          <Route  exact path="/signup">
            <SignUp1 showAlert={showAlert} />
          </Route>
          <Route  exact path="/forgotPassword">
            <ForgotPassword1 showAlert={showAlert}/>
          </Route>
          <Route  exact path="/viewProfile/:id">
            <EditProfile/>
          </Route>
          <Route exact path="/product/upload">
            <UploadProduct/>
          </Route>
          <Route exact path="/product/:id">
            <DetailProductPage/>
          </Route>
          <Route exact path="/mypost/:id">
            <MyPosts/>
          </Route>
        </Switch>
      <Footer/>
    </>
  );
};

export default MainRoute;

This Line is in the product. js well it's a material ui card where a action is add (view) when clicking on it detailProduct page should have to be rendered but it doesn't.

product.js

import {Link } from "react-router-dom";
<Link to={`/product/${product._id}`} style={{textDecoration: "none"}}>
          <Button size="small">View</Button>
          </Link>

DetailProductPage.js

import React from 'react'

export const DetailProductPage = () => {
  return (
    <div style={{marginTop: "70px"}}>
    <h1>Hello</h1>
    </div>
  )
}

(Rendering Hello for testing)

If anyone know what's the problem please let me know TIA

Answer 1

I don't think this might be the reason, but if you are using react 18 with react-router-dom-V5, it will not work in react.strictMode, you will have to remove the <React.StrictMode> tag from your index.js or update to V6 of react-router-dom