Что меняется в логике React при использовании HOC компонента при роутинге?

Question

[Apl-by]

Привет. Пытаюсь понять логику. Есть упрощенный код:

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

function ProtectedRoute({ component: Component, ...props }) {
  return (
    <Route exact path={props.path}>
      <Redirect to="/sign-in" />
    </Route>)
}

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Switch>
      **Вариант 1:**  <ProtectedRoute path="/" />
    
      **Вариант 2:**  <Route exact path="/">
                         <Redirect to="sign-in" />
                      </Route> 
   
          <Route path="/sign-in">
            <div>Login</div>
          </Route>
          <Route path="/sign-up">
            <div>Register</div>
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
    
}

export default App;

С вариантом 1 ничего и никуда не перенаправит, хотя компонент возвращает тот же Route, что и в варианте 2. В чем разница между 1 и 2 вариантами?

И второй вопрос. Если не использовать Switch, и в HOC ProtectedRoute вместо

return (
    <Route exact path={props.path}>
      <Redirect to="/sign-in" />
    </Route>)

использовать

return (
    <Route exact path={props.path}>
      {() => <Redirect to="/sign-in" />}
    </Route>)

то без разницы какой адрес мы укажем, нас всегда будет перенаправлять на /sign-in. Хотя вроде у Route указан exact для path="/". В чем разница для реакта между

<Redirect to="/sign-in" /> и () => <Redirect to="/sign-in" />

в этом случае?