React-router-dom npm

Npm react router dom

$ npm install --save react-router-dom

Source: npmjs.com

React-router-dom npm

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch
  useParams
} from "react-router-dom";
export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
function Home() {
  return <h2>Home</h2>;
}
function About() {
  return <h2>About</h2>;
}
function Topics() {
  let match = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>
            Props v. State
          </Link>
        </li>
      </ul>
      {/* The Topics page has its own <Switch> with more routes
          that build on the /topics URL path. You can think of the
          2nd <Route> here as an "index" page for all topics, or
          the page that is shown when no topic is selected */}
      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={match.path}>
          <h3>Please select a topic.</h3>
        </Route>
      </Switch>
    </div>
  );
}
function Topic() {
  let { topicId } = useParams();
  return <h3>Requested topic ID: {topicId}</h3>;
}

Source: encodingcompiler.com

Similar codes

0 vote372 views1 answer
Auto refresh database in outsystems reactive
Javascript React
0 vote359 views1 answer
Install aos in react
Javascript React
1 vote370 views1 answer
React multiple event handlers]
Javascript React
0 vote361 views1 answer
React fetch request with content type x-www-form-urlencoded
Javascript React
1 vote331 views1 answer
Slider on release call api react material ui
Javascript React
1 vote303 views3 answers
Antd react
Javascript React
11 votes408 views4 answers
React native text underline
Javascript React
0 vote361 views2 answers
Background transparent react native
Javascript React
0 vote338 views1 answer
React Hook useEffect has missing dependencies: 'cart' and 'user._id'. Either include them or remove the dependency array react-hooks/exhaustive-deps
Javascript React
0 vote341 views1 answer
React Update a label when rate moves "quietly"
Javascript React