how to work react router another component

1import React, { Fragment } from "react";
2import "./index.css"
3
4import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
5
6export default function App() {
7  const name = 'John Doe'
8  const isAuthenticated = false
9  return (
10   <Router>
11    <main>
12      <nav>
13        <ul>
14          <li><Link to="/">Home</Link></li>
15          <li><Link to={`/about/${name}`}>About</Link></li>
16          <li><Link to="/contact">Contact</Link></li>
17        </ul>
18      </nav>
19    <Switch>
20      <Route path="/" exact component={Home} />
21      {
22      isAuthenticated ? 
23      <>
24      <Route path="/about/:name"  component={About} />
25      <Route path="/contact"  component={Contact} />
26      </> : <Redirect to="/" />
27      }
28      
29    </Switch>
30    </main>
31</Router>
32  );
33}
34