How to Routing in React

R. Zegveld F
3 min readFeb 11, 2022

--

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`!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

R. Zegveld F
R. Zegveld F

Written by R. Zegveld F

2:AM LoFi Writer on Radkai Tech ⚡|| Fullstack Dev turned AI Engineer 🤖 || Data Trainer on Opentrain and Outlier AI

No responses yet

Write a response