Context Usually, when you load up a website, most of the pages like the about page, the contact page have to fetch data from the server before rendering. With React, and React Router, everything becomes simplified because only a specific component loads up. In single-page apps, there is only a single HTML page. we are reusing the same HTML page to render the different components based on the navigation. What exactly is Routing? Routing is the ability to move between different parts of an application when a user enters a URL or clicks an element (link, button, icon, image, etc) within the application. Using Routers in a React App In order to understand exactly how routes work in react, we will need to create a react app. Create a react app by typing the command below npx create-react-app routing By default, when you use the above command to create a react app, it creates other files and folders, two of which are the App.js, and the Index.js. The App.js acts like the main component that renders all other components. The Index.js then renders the App.js. At this point, installing the react-router package is easy. Navigate into the react app and install the react-router package. Installing the React Router Assuming that react has already been installed and the react app created, we can go ahead and install the react-router. To extend your application by adding routing capabilities, you will use the popular library. It’s worth noting that this library has three variants: React-Router : the core library react-router : a variant of the core library meant to be used for web applications react-router-dom : a variant of the core library used with react native in the development of Android and iOS applications. react-router-native Because our scope is web applications, we are most interested in the react-router-dom which imports all the functionality of the core react-router library. To install react-router-dom, navigate to the root folder of the project and type the following command npm install react-router-dom To see the routes in action, we will edit the App.js and then create other components. React { render() { ( <h1>Home</h1> ) } } App // App.js import from 'react' . class App extends React Component return < > div </ > div export default React { render() { } } Contact //contact.js import from 'react' . class Contact extends React Component return Contact < > h1 </ > h1 export default React { render() { } } About //About.js import from 'react' . class About extends React Component return About Us < > h1 </ > h1 export default Now our app has three components one is App and the other two are About and Contact. Routing In the Index.js, we will import the react-router-dom package we installed earlier, then we will import all the other components as follows; React ReactDOM { Route, Link, BrowserRouter Router } App About Contact //index.js import from 'react' import from 'react-dom' import as from 'react-router-dom' import './index.css' import from './App' import from './About' import from './contact' Notice that the react-router package includes a number of routers that we can take advantage of depending on the platform we are targeting. These include BrowserRouter, Route, Link. BrowserRouter The is used for applications that have a dynamic server that knows how to handle any type of URL. BrowserRouter Route The component is one of the most important building blocks in the React Router package. It renders the appropriate user interface when the current location matches the route’s . The is a prop on the component that describes the pathname that the route should match. <Route/> path path <Route/> Link The react-router package also contains a component that is used to navigate the different parts of an application by way of hyperlinks. It is similar to HTML’s anchor element but the main difference is that using the component does not reload the page but rather, changes the UI. <Link/> Link Using an anchor tag would require that the page is reloaded in order to load the new UI. When the component is clicked, it also updates the URL.as shown in the example that follows Link Combining the above knowledge on BrowserRouter, Route, and Link, we can update our index.js to look like this React ReactDOM { Route, Link, BrowserRouter Router } App About Contact routing = ( <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> <Route exact path="/" component={App} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </div> </Router> ) ReactDOM.render(routing, document.getElementById('root')) //index.js import from 'react' import from 'react-dom' import './index.css' import as from 'react-router-dom' import from './App' import from './about' import from './contact' const < > Router After adding navigation you will see the routes are rendered on the screen. if you click on any of the routes you will see that the URL is changing and the individual component is rendered. What if the user types a URL that is not found on the web page? The best way to handle these cases is to create a not-found component or what is usually called 404 pages. What is a 404 Page? A 404 page is also called a "not found" page. This happens when a user navigates to the wrong path that doesn’t exist on the website. To be able to redirect to a 404 page, we need to import another react-router package router called Switch. Switch Switch component helps us to render components only when the path matches, otherwise it fallbacks to the not found component. Let's demonstrate this by creating a not-found component; React Notfound = <h1>Not found< //notfound.js import from 'react' const => () /h1> export default Notfound We then import the Switch router on our index.js as shown below React ReactDOM { Route, Link, BrowserRouter Router, Switch } App About Contact Notfound routing = ( <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> <Switch> <Route exact path="/" component={App} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> <Route component={Notfound} /> </Switch> </div> </Router> ) ReactDOM.render(routing, document.getElementById('root')) //index.js import from 'react' import from 'react-dom' import './index.css' import as from 'react-router-dom' import from './App' import from './about' import from './contact' import from './notfound' const < > Router Notice how the Notfound component has no path specification. Each time a user enters a wrong path, or any path not specified in the index.js, that user will be redirected to the 404 pages or the not-found page. Leave a like if this article was helpful to you
