How can I get my product page to work on refresh with React -->Navigate?-CodePudding

In the past I used to use Redirect in order to redirect my product page to my home page when I refreshed the page. I used something like this :

    import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import "./App.css";

import { connect } from "react-redux";

import Navbar from "./components/Navbar/Navbar";
import Products from "./components/Products/Products";
import Cart from "./components/Cart/Cart";
import SingleItem from "./components/SingleItem/SingleItem";

function App({ current }) {
  return (
    <Router>
      <div className="app">
        <Navbar />
        <Switch>
          <Route exact path="/" component={Products} />
          <Route exact path="/cart" component={Cart} />
          {!current ? (
            <Redirect to="/" />
          ) : (
            <Route exact path="/product/:id" component={SingleItem} />
          )}
        </Switch>
      </div>
    </Router>
  );
}

const mapStateToProps = (state) => {
  return {
    current: state.shop.currentItem,
  };
};

export default connect(mapStateToProps)(App);

Now with react-router-dom v6 I'm trying to do the same thing but with Navigate

import { BrowserRouter as Router,
    Route,
    Routes,
    Navigate} from 'react-router-dom'
import React from "react"
import "./reset.css"
import "./App.css"
import HomeScreen from "./screens/HomeScreen"
import Cart from "./screens/Cart"
import SingleItem from './screens/SingleItem'
import { connect } from 'react-redux'


const App = ({currentItem}) => {

    return (
        <Router>
            <Routes>
                <Route path="/" element={<HomeScreen/>}/>
                <Route path="/cart" element={<Cart/>}/>
                <Route path="/product/:id" element={!currentItem ? <Navigate to="/"/> : <SingleItem/>} />
                <Route path="*" element={<HomeScreen/>} />
                
            </Routes>
        </Router>
    )
    }

    const mapStateToProps = state => {
        return {
            currentItem: state.shop.currentItem
        }
    }
export default connect(mapStateToProps)(App);

When I try to refresh the product page now it throws this error: GET http://localhost:3000/product/bundle.js net::ERR_ABORTED 404 (Not Found) I read a lot of answers regarding this problem but I still couldn't figure it out. Thank you

CodePudding user response：

For react router v6 try this:

 return (
        <Router>
            <Routes>
                <Route path="/" element={<HomeScreen/>}/>
                <Route path="/cart" element={<Cart/>}/>
                <Route path="/product/:id" element={!currentItem ? <Navigate to="/" replace/> : <SingleItem/>} />
                <Route path="*" element={<HomeScreen/>} />
                
            </Routes>
        </Router>