React Router is a package that enables React to serve up components based on urls requested. Much like you'd be making a request to a server that would look at your endpoints, and decide which files to serve you.
How to setup React Router for your project?
Open your terminal and cd to your project's folder.
Run the command: npm install react-router-dom.
Now check your package.json and make sure it has the react-router-dom.
How to use it?
We're gonna be making a small demo where we use the React Router.
First off: Set up a small react project, like you'd usually do. You can use the command npx create-react-app yourProject'sName to create your react app's folder. You'll find a number of files there... clean your app from all files except for App.js, index.js, and serviceWorker.js.
Second: Clean your files from imports and code that concerns files that are no longer there.
In your App.js file, in the App class, inside the return statement and inside the <div></div> tags, clean all code and write instead <h1>Hello World</h1>.
Third: Start your server by typing in your terminal npm start.
The app's tab should open in your browser. If it doesn't, just type in your URL bar localhost:3000.
Fourth: Let's make an app that has 4 components. A main navigation page, a home page, a contact page, and an about page.
Make a new directory in your src and call it components. This is where we're gonna be making and saving our components.
Make 4 folders, and call them Home, Contact, About, Navbar.
Make an index.js file inside each folder.
In the first 3 files mentioned in step 2, make a functional component that serves up a header one which has the name of the page, and a paragraph that gives a short description. Don't forget to wrap them in a <React.Fragment> in order to display correctly.
export default nameOfComponent for each one of them.
In the Navbar file, also make a functional component that serves up an unordered list, which has anchor elements nested within.
Populate the anchor tags with proper text for each page: Home, Contact, About.
Set the href attribute to whatever endpoints you want for each one of them. For example, you can set the href attribute for the Home one to be /.
export default your Navabr component. We're gonna need it.
Import all your exported components to your App.js file.
Inside your <div></div> tag, nest your <Navbar/> component to render it.
check if everything is working correctly before going to the next steps
Fifth:
In your App component, in the return statement, nest your <div></div> tags in <BrowserRouter></BrowserRouter>.
Import react-router-dom in your App.js by typing at the top of your file:
import { BrowserRouter, Route } from "react-router-dom"
3- To start setting routes, nest the following line in your <div></div> element three times:
<Route path=" " component={ } />
Let's break it down:
a. means that you're setting/defining a route.
b. The path property is to set the destination/endpoint.
c. The component property is to specify which component to serve up once you hit this particular endpoint.
For example: <Route path="/contact" component={Contact}/> means serve up the Contact component (which we imported) when you hit the /contact endpoint.
4- Try the links you set up in your Navbar component and if they truly serve up your components or not.
Sixth: There are many observations, notes and clarifications to be made. -To be continued.
What is React Router?
React Router is a package that enables React to serve up components based on urls requested. Much like you'd be making a request to a server that would look at your endpoints, and decide which files to serve you.
How to setup React Router for your project?
cdto your project's folder.npm install react-router-dom.How to use it?
We're gonna be making a small demo where we use the React Router.
First off: Set up a small react project, like you'd usually do. You can use the command
npx create-react-app yourProject'sNameto create your react app's folder. You'll find a number of files there... clean your app from all files except for App.js, index.js, and serviceWorker.js.Second: Clean your files from imports and code that concerns files that are no longer there. In your App.js file, in the App class, inside the return statement and inside the
<div></div>tags, clean all code and write instead<h1>Hello World</h1>.Third: Start your server by typing in your terminal
npm start. The app's tab should open in your browser. If it doesn't, just type in your URL barlocalhost:3000.Fourth: Let's make an app that has 4 components. A main navigation page, a home page, a contact page, and an about page.
Make a new directory in your
srcand call itcomponents. This is where we're gonna be making and saving our components.Make 4 folders, and call them
Home,Contact,About,Navbar.Make an index.js file inside each folder.
In the first 3 files mentioned in step 2, make a functional component that serves up a header one which has the name of the page, and a paragraph that gives a short description. Don't forget to wrap them in a
<React.Fragment>in order to display correctly.export default
nameOfComponentfor each one of them.In the Navbar file, also make a functional component that serves up an unordered list, which has anchor elements nested within.
Populate the anchor tags with proper text for each page: Home, Contact, About.
Set the href attribute to whatever endpoints you want for each one of them. For example, you can set the href attribute for the Home one to be
/.export default your Navabr component. We're gonna need it.
Import all your exported components to your App.js file.
Inside your
<div></div>tag, nest your<Navbar/>component to render it.check if everything is working correctly before going to the next steps
Fifth:
In your App component, in the return statement, nest your
<div></div>tags in<BrowserRouter></BrowserRouter>.Import
react-router-domin your App.js by typing at the top of your file:import { BrowserRouter, Route } from "react-router-dom"3- To start setting routes, nest the following line in your
<div></div>element three times:<Route path=" " component={ } />Let's break it down:
a.
pathproperty is to set the destination/endpoint. c. Thecomponentproperty is to specify which component to serve up once you hit this particular endpoint. For example:<Route path="/contact" component={Contact}/>means serve up the Contact component (which we imported) when you hit the/contactendpoint.4- Try the links you set up in your Navbar component and if they truly serve up your components or not.
Sixth: There are many observations, notes and clarifications to be made. -To be continued.