老师，我这种私有路由的写法，可行不？有没有潜在的大坑？

import React from 'react'
import styles from './App.module.css'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { Home, Register, SignIn, Detail, SearchPage, ShoppingCart } from './pages'
import { useSelector } from './redux/hooks'

const PrivateRoute = ({ children }) => {
  const jwt = useSelector(state => state.user.token)
  return jwt != null ? children : <Navigate to='/signIn' />
}

function App() {
  
  return (
    <div className={styles.App}>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/signIn' element={<SignIn />} />
          <Route path='/register' element={<Register />} />
          <Route path='/detail/:routeId' element={<Detail />} />
          <Route path='/search' element={<SearchPage />} >
            <Route path=':keywords' element={<SearchPage />} />
          </Route>
          <Route path='/shoppingCart' element={<PrivateRoute><ShoppingCart /></PrivateRoute>} />
          <Route path='*' element={<h1>404~~~页面不存在哦</h1>} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;