Search
showing results for - "nested routing react router"
Kevin
15 Jan 2020
1import React from "react";
2import {
3  BrowserRouter as Router,
4  Switch,
5  Route,
6  Link,
7  useRouteMatch,
8  useParams
9} from "react-router-dom";
10
11export default function App() {
12  return (
13    <Router>
14      <div>
15        <ul>
16          <li>
17            <Link to="/">Home</Link>
18          </li>
19          <li>
20            <Link to="/about">About</Link>
21          </li>
22          <li>
23            <Link to="/topics">Topics</Link>
24          </li>
25        </ul>
26
27        <Switch>
28          <Route path="/about">
29            <About />
30          </Route>
31          <Route path="/topics">
32            <Topics />
33          </Route>
34          <Route path="/">
35            <Home />
36          </Route>
37        </Switch>
38      </div>
39    </Router>
40  );
41}
42
43function Home() {
44  return <h2>Home</h2>;
45}
46
47function About() {
48  return <h2>About</h2>;
49}
50
51function Topics() {
52  let match = useRouteMatch();
53
54  return (
55    <div>
56      <h2>Topics</h2>
57
58      <ul>
59        <li>
60          <Link to={`${match.url}/components`}>Components</Link>
61        </li>
62        <li>
63          <Link to={`${match.url}/props-v-state`}>
64            Props v. State
65          </Link>
66        </li>
67      </ul>
68
69      {/* The Topics page has its own <Switch> with more routes
70          that build on the /topics URL path. You can think of the
71          2nd <Route> here as an "index" page for all topics, or
72          the page that is shown when no topic is selected */}
73      <Switch>
74        <Route path={`${match.path}/:topicId`}>
75          <Topic />
76        </Route>
77        <Route path={match.path}>
78          <h3>Please select a topic.</h3>
79        </Route>
80      </Switch>
81    </div>
82  );
83}
84
85function Topic() {
86  let { topicId } = useParams();
87  return <h3>Requested topic ID: {topicId}</h3>;
88}
89
source
similar questions
rendering component in route with propertiesreact router dom redirect on clickreact router dom indexredirectreact route multiple componentshow to have nested loops with map in jsx 3fget nested value on object react using dotreact router redirectreact router dom two page formnested navigation react nativehow to redirect react router from the app componentsnest navigation react navigationredirect react routerredirect to another path reactreact router redirectmultiple path names for a same component in react routerhow to link to a different component in reactjs without react router
queries leading to this page
react router npmrouter in router react jsrouting in reactjsreact routing 2aimport 7b browserrouter as router 2c route 2c switch 7d from 22react router dom 22 3breact router 5 nested routesnested routing in a component react router domreact router on app jsreact js nested routingdefine react routerwhat is router in react jshow to use routes in routes in react jsreact js routing nestedreact router react jsnested routes react router route configreact router routerreact routerimport react router dom npm in reactnpm i s react router domnested route in reactreact router dom npm documentationnested routing in react js examplereact router componentrouter in react jsreact router dom nested routesreact router dom nested routes examplerouter for reactwhat is a react routernpm react router dom 6raecte routernested elements react routereact nested routsreact routererouting reactjsreact router nested route patternnsreact js routerhowt to implement routing in reacthow to use react routesreact router nested routes class componentreact router dom nested routing 3croute 3e reactreact routereact router 6 nested routesreact routerthow to define routes in router reactroutes react routerimport 7b browserrouter as router 2c switch 2c route 2c link 2c 7d from 27react router dom 27 3breact js routing domrouting using reactreact router nestereact routenpm i react router dom 405reactjs react routerreact routes nestedreact app routerroutes reactjsreact routerrouting in react js applicationnested routing in react router domrouting syntax in react jsnested routes react router domwhat is routing 3f reactdefinition react routerreact js routerreact router dom npm jshow to route in react jsnpm i react router dom v5nesting routing in route react router domvue routerrouting with reactnested router in react js react nested routereact router routereact router hoksrecat routerreact router 2frouting on reactjsreact router npmreact router reactreact router dom npmnpm i react router domnpm rect router domreact routes using react routernested routing in react 5make nested routing in react jsreaxct router nested componentsroute react jswhat is routes in reactjshow to do nested routing in react jsreact router 3croutenested route reactjsnest router reactreact router dom nested routingreactjs routes nestedreact routezrreacct routerreact js routeing 23 2f route in react jsreact router nestedreact router nested routenested routes in react router domnested routes react router v6react routersreact router dom npmreact router dom nomrouting in reactreact native router nested routesroute in react routerwhat is a router in reacthow to use react routerreact router dom npmreact route componentreactjs routing codereact router npm react route dom npm 27 2f 27 react router reactjsreact router nested routesnesting routes in reactreact router get route in nested pathreactjs routenpm install react router domnested elements react routerreactjs nested routingreact docs routerrender nested route in react router domnpm install react router domreact router nested routerreact router dom nested routesreat routerreact router 3 nested routesreact routingroutes in reactreact js routesroutes reactreact 3croute 3ehow to use routes in reactnested route react routerraect routerroute react routerreact browser routehow to use route in react jsreacgt router nested routesroutes in javascript reactreactjs in routesreact js routereact js react routerreact router do react router nested routesreact router nested routes with functional componentnested route in react routernested route react router domhow to use a router in reactwhat is routing in reactnpm i react routernested routes in react router domimplement routing in reactreact browser routernpm react routernesting routing in reactnested routes react router v6route in react appnested routing react jsreact routerpage routing in react jsreact js routingnested routes routing reactconnected react router nested routesnested routing in reactrouting in react js routing in react js instal react router dom npmhow to use routing in react jswhat is react route js fornested routes with react routerreact router withrouterreact router define nested routereact router dom 27 npmcreating nested routes in reactreact router nested routingrouters react jsnesting routes react routerreact 2brouterreactjs routesreact page routing nestedreact router dom npm router react routerreact router nested routes exact 3croute 2f 3e reactreact js nested routesinstall npm react router domreact 2a routerouter component reactreact nested routinghow to do routing in react jsnested routing react router domnpm react router domreact js routereact router what is itrouter reactjsreact js router routenested routing reactrouting example react jsnested routes react routernested react routerhow to define dort route in react jsreact routerrouting reacthow to use nested routing in react jsnested navigation react routerreact routeshow to route in reactreact router in react jsreact js routing tutorialnested route inside componentreact router useparamsnested routes subitem reactwhat is react routerreact router nested routes 5does react js have routingreact routingreact routeeruse of nested routes reactreact router dom install npmreact router npmnpm i react router domreact router docreact nested routesreactjs router dom npmrouting react jsreact router nested routing examplerouter dom react npmroute reactreact routing javascriptreact router router componenthow to route to a component in reactreactjs routerrouter in reactimport 7bbrowserouter 2croute 2cswitch 7dmake routing in react jsrouter react dom npmnested route react jswhat is react routinghow to make route in reactjsnested route reacthow to create nested routes in reacthow to use routes in react jsroute in react jsreact router docsreact nested routernested router reacthow to implement routing n reactjshow to make route in reacttwo react router dom nested routeshow use react router react routerreacy routerreact router dom nestedwhat is routing in react jsroutes components in react jsreact router npmnested routing in react routerreact route component react reouterreact router routingnested routes in reactpreact routerwhat is router reactreact router web nested routesnested routing react routerwhat is nested routing in reactrouter in react routerroute in reactroute component reactrouter reactnested routes reactroute react componentnpm react router domreact routerrreact route routernpm react router domnested routing react router