Using different page template for React Login/Register page?

I use an Admin Dashboard in my React app and now I will add a Login and Register pages to the app. However, I am not sure how can I make login and register routes to use a different template than the app. I trşed something below, but it is too ugly and I think there would be a better way in React.

Note: I thought to check if the user logged in or not in App.js or index.js and then use the necessary component e.g. navbar.

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {localStorage.getItem("currentUser") != null ? <AppBar></AppBar> : null}
        <Switch>
          <Route exact path="/create" component={Form} />

          // ...
        </Switch>
      </BrowserRouter>
    </div>
  );
}

The second issue is, should I use an AuthContextProvider to check if the user authenticated or not instead of localStorage.getItem("currentUser") != null as metioned on the following approach? Any idea?

https://stackoverflow.com/questions/61892504/redirect-to-page-with-different-page-layout-in-react

Following solution might help you :

Index.js

root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

App.js

export default function App() {
  return (
    <div className="App">
<Switch>
        {localStorage.getItem("currentUser") != null ? <AppBar /> : null}
        <Switch>
          <Route exact path="/create" component={<Form />} />
         <Route exact path="/register" component={<Register />} /> //register component
         <Route exact path="/login" component={<Login />} /> //login component
</Switch>
    </div>

);
}