xxxxxxxxxx
import { Redirect, Route, Switch } from "react-router";
let routes = (
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/users">
<Users />
</Route>
<Redirect from="/accounts" to="/users" />
<Route>
<NoMatch />
</Route>
</Switch>
);
xxxxxxxxxx
import {Switch} from 'react-router-dom'
<Switch> is unique in that it renders a route exclusively.
In contrast, every <Route> that matches the location renders inclusively.
<div className="container">
<Navbar />
<Switch>
<Route exact path="/">
{!user && <Redirect to ='/login' />}
{user && <Dashboard />}
</Route>
<Route path="/create">
{!user && <Redirect to='/login' />}
{user && <Create />}
</Route>
</Switch>
xxxxxxxxxx
import { Route, Switch } from "react-router";
let routes = (
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/:user">
<User />
</Route>
<Route>
<NoMatch />
</Route>
</Switch>
);
# Now, if we’re at /about, <Switch> will start looking for a matching <Route>.
# <Route path="/about"/> will match and <Switch> will stop looking for matches and render <About>.
# Similarly, if we’re at /michael then <User> will render.