how to work react router another component
import React, { Fragment } from "react";
import "./index.css"
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
export default function App() {
const name = 'John Doe'
const isAuthenticated = false
return (
<Router>
<main>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to={`/about/${name}`}>About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Home} />
{
isAuthenticated ?
<>
<Route path="/about/:name" component={About} />
<Route path="/contact" component={Contact} />
</> : <Redirect to="/" />
}
</Switch>
</main>
</Router>
);
}