1import React from "react";
2import {
3 BrowserRouter as Router,
4 Switch,
5 Route,
6 Link
7} from "react-router-dom";
8
9export default function App() {
10 return (
11 <Router>
12 <div>
13 <nav>
14 <ul>
15 <li>
16 <Link to="/">Home</Link>
17 </li>
18 <li>
19 <Link to="/about">About</Link>
20 </li>
21 <li>
22 <Link to="/users">Users</Link>
23 </li>
24 </ul>
25 </nav>
26
27 {/* A <Switch> looks through its children <Route>s and
28 renders the first one that matches the current URL. */}
29 <Switch>
30 <Route path="/about">
31 <About />
32 </Route>
33 <Route path="/users">
34 <Users />
35 </Route>
36 <Route path="/">
37 <Home />
38 </Route>
39 </Switch>
40 </div>
41 </Router>
42 );
43}
44
45function Home() {
46 return <h2>Home</h2>;
47}
48
49function About() {
50 return <h2>About</h2>;
51}
52
53function Users() {
54 return <h2>Users</h2>;
55}
56
1React router as a browserRouter in App.js for navbar links like Home,
2services,conatct-us etc.
3 // npm install react-router-dom
4
5// ##### Basic Routing #####
6import React from 'react';
7import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
8
9export default function App() {
10 return (
11 <Router>
12 <div>
13 <nav>
14 <ul>
15 <li>
16 <Link to="/">Home</Link>
17 </li>
18 <li>
19 <Link to="/about">About</Link>
20 </li>
21 <li>
22 <Link to="/users">Users</Link>
23 </li>
24 </ul>
25 </nav>
26
27 {/* A <Switch> looks through its children <Route>s and
28 renders the first one that matches the current URL. */}
29 <Switch>
30 <Route path="/about">
31 <About />
32 </Route>
33 <Route path="/users">
34 <Users />
35 </Route>
36 <Route path="/">
37 <Home />
38 </Route>
39 </Switch>
40 </div>
41 </Router>
42 );
43}
44
45function Home() {
46 return <h2>Home</h2>;
47}
48
49function About() {
50 return <h2>About</h2>;
51}
52
53function Users() {
54 return <h2>Users</h2>;
55}
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
1npm install react-router-dom
2to install the react router to create a specific urls in react
1npx create-react-app nameOfApplication
2cd nameOfApplication
3when we create the application we use this commands.