How to Routing in React

Okay so React is Based on Single Page Application so Let’s straightforward into the Route

node .@ TowardDataScience

What is Route in react ?

  • Route is a Page Component on React .
  • You can use react-router on React JS
  • And react-navigation on React Native

Why it used ?

React is based on Single Page Application .

It means the website will be dynamically require less resource and time to be loaded .

It’s better , than to reload/render everything again like the first time.

The Route Path

<Router>
<Routes>
<Route path="home" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="dashboard" element={<Dashboard />} />
</Routes>
</Router>

or Full Route code

import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";


export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
{}

<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
);
}

// The route is just a page component on react
// below are the function link to be clicked

function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}

function About() {
return (
<div>
<h2>About</h2>
</div>
);
}

function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}

Bad Route code

var AppRoutes = [
<Route handler={App} someProp="defaultProp">
<Route path="/" handler={Page} />
</Route>,

<Route handler={App} someProp="defaultProp">
<Route path="/" handler={Header} >
<Route path="/withheader" handler={Page} />
</Route>
</Route>,

<Route handler={App} someProp="defaultProp">
<Route path=":home" handler={Home} />
<Route path=":home/:about" handler={About} />
<Route path=":home/:about/:dashboard" handler={Dashboard} />
</Route>
];
// error reference : https://stackoverflow.com/questions/32128978/react-router-no-not-found-route

Why you should avoid bad routing ?

  • The first thing is your App may not work .

Even it work, it’s possible to run an odd things (a.k.a bug)

  • Routing is one of an essential component for react , understanding it more will give some performance like SEO (without framework) and readability code for developer and machine.

Route Error Handling

  • unfortunately i’m still don’t know how to do error handling with react-router , i think it’s impossible , just likely the documentation doesn’t introduce it , or any API on it .

But you can use error Boundary that provided by React

import {ErrorBoundary} from 'react-error-boundary'

function MyFallbackComponent({error, resetErrorBoundary}) {
return (
<div role="alert">
<p>Something went wrong:</p>
<pre>{error.message}</pre>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)
}

export default function App() {
return (
<ErrorBoundary
FallbackComponent={MyFallbackComponent}
onError={(error, errorInfo) => errorService.log({ error, errorInfo })}
onReset={() => {
// reset the state of your app
}}
>
<MyErrorProneComponent />
</ErrorBoundary>
);
}

Conclusion

Perhaps you may notice why we don’t use hyperlink instead route ?

The Differences between route and hyperlink is

  • route don’t take too long to load and can be a dynamic website to save some session.
  • and hyperlink will be re-render up everytime it loaded .

Thankyou for Reading , have a Good Day`!

--

--

--

Trying mybest to self-love , learn and share through resonance of technologies.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Understanding Redux with Fun Project

How to Debug Nodejs in Docker

Minifying Tailwind.css with Create React App

The total size of the minified build is 2.7 megabytes

Let’s Create a React CSS Transitions|Animations (React Transition Group)

How to Create a Toggle Button in Vue.js

Why I love styled-components

The case for Array#replace()

Visualizing My Logs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rizki F

Rizki F

Trying mybest to self-love , learn and share through resonance of technologies.

More from Medium

Easy use of props in Next.js

How To Create and Set Up a React Project with Create React App in Windows?

How to change color React Spring Bottom Sheet background

React -login-app with mock API