routing with parameterrs react example
import { BrowserRouter as Router, Route, Link, Switch, useParams } from "react-router-dom";
export default function App() {
const name = 'John Doe'
return (
<Router>
<main>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to={`/about/${name}`}>About</Link></li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about/:name" component={About} />
</Switch>
</main>
</Router>
);
}
const About = () => {
const { name } = useParams()
return (
// props.match.params.name
<Fragment>
{ name !== 'John Doe' ? <Redirect to="/" /> : null }
<h1>About {name}</h1>
<Route component={Contact} />
</Fragment>
)
};