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