React-Router

A router for React.js. Docs: https://reacttraining.com/react-router/core/api/Switch

1 flashcards · Programming Languages · by lakesare

1. How is <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> different from import { Switch, Route } from 'react-router' <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch> ?

   If the URL is /about, then <About>, <User>, and <NoMatch> will all render because they all match the path. This is by design, allowing us to compose <Route>s into our apps in many ways, like sidebars and breadcrumbs, bootstrap tabs, etc. 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.