I need you to redirect to Shop if url is wrong. React js-CodePudding

I need it to redirect to my main page if the url is wrong, the problem must be in this part , because before I used Redirect, but in the new version of React it is Navigate and I don't know if the way of entering changed

import React from 'react';
import {Routes, Route, Navigate} from 'react-router-dom';
import {authRoutes, publicRoutes} from '../routes';
import { SHOP_ROUTE } from '../utils/consts';

const AppRouter = () => {
    const isAuth = false
    return (
        <Routes>
            {isAuth && authRoutes.map(({path, Component}) =>
                <Route key={path} path={path} element={<Component/>} exact/>
            )}
            {publicRoutes.map(({path, Component}) =>
                <Route key={path} path={path} element={<Component/>} exact/>
            )}
            <Navigate to={SHOP_ROUTE}/>
        </Routes>
    );
};

export default AppRouter;

CodePudding user response：

If you include a <Route path="*" /> component (as shown in the docs) at the end of the <Routes />, then the last route will be shown when no other route has been matched.

import React from 'react';
import {Routes, Route, Navigate} from 'react-router-dom';
import {authRoutes, publicRoutes} from '../routes';
import { SHOP_ROUTE } from '../utils/consts';

const AppRouter = () => {
    const isAuth = false
    return (
        <Routes>
            {isAuth && authRoutes.map(({path, Component}) =>
                <Route key={path} path={path} element={<Component/>} exact/>
            )}
            {publicRoutes.map(({path, Component}) =>
                <Route key={path} path={path} element={<Component/>} exact/>
            )}
            <Route path="*" element={<NotFound />} />
        </Routes>
    );
};

export default AppRouter;