reactjs router tutorial code example
Example 1: how to routing in react js
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>;
}
Example 2: how to routing in react js
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
Example 3: router react tutorial
function Navbar() {
return (
<div>
<Link to="/">Home </Link>
<Link to="/about">About Us </Link>
<Link to="/shop">Shop Now </Link>
</div>
);
};
Example 4: react router tutorial
//App.js File
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Navbar from './Navbar';
import About from './About';
import Shop from './Shop';
//all classNames beginning with w3-* are from w3.css framework available on w3.schools.com
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<div className="w3-container">
<Navbar />
<Switch>
<Route path="/about" exact component={About}/>
<Route path="/shop" exact component={Shop}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
//Navbar.js File
import React from 'react';
import {Link} from 'react-router-dom';
export default class Navbar extends React.Component{
render(){
return(
<div className="w3-bar w3-deep-purple">
<span className="w3-bar-item w3-button w3-hover-green">MyReactRouter</span>
<Link to="/about" className="w3-bar-item w3-button w3-hover-green">
<span>About</span>
</Link>
<Link to="/shop">
<span className="w3-bar-item w3-button w3-hover-green">Shop</span>
</Link>
</div>
)
}
}
//About.js File
import React from 'react';
export default function About(){
return(
<div className="w3-container">
<h1 className="w3-header w3-indigo w3-center">About Page</h1>
</div>
)
}
//Shop.js File
import React from 'react';
export default function Shop(){
return(
<div className="w3-container">
<h1 className="w3-header w3-indigo w3-center">Shop Page</h1>
</div>
)
}