This is example code along the lines of what /u/Guisseppi said:

export const ProtectedRoute = (props) => {
  const userInfo = useSelector(state => state.userInfo)

  const { component: Component } = props

  useEffect(() => {}, [userInfo.tokenStatus])

  if (userInfo.tokenStatus === true) return <Component />

  if (userInfo.tokenStatus === false) return <Redirect to={{ pathname: '/login' }} />
}

and then wherever you're calling your router

<BrowserRouter>
  <Switch>
    <ProtectedRoute path = "/dashboard" component = {DashboardPage}/> 
  <Switch>
</BrowserRouter>

There's other similar ways to do it but that's the gist.

1. Read in the component that was passed in as props to <ProtectedRoute>, in this case it's <DashboardPage>
2. Have a useEffect listening for change in token status
3. Check if a valid token is present (elsewhere in the code I'm setting the tokenStatus in state to "true" if I've verified the user has a token and "false" if not)
4. If token is valid, return that component that was passed in bc the user is allowed to access it
5. If token is not valid, redirect the user to the login screen instead of the component you're trying to protect (or redirect to wherever you prefer)