Create A React Router App ASAP
Tags: javascript, webdev, react, tutorial
Published: 2022-01-22 01:28:23


&nbsp;&nbsp;&nbsp;&nbsp;Have you ever created a React app and wondered what it would take to add routes? Have, let's say, a seperate 
page for your posts and pictures? Routes are a basic concept in web development and are necessary for any web development framework, frontend or backend. This is especially essential for RESTful APIs that take advantage of the ability for routes to output different pages, carry out different functions like logging in, logging out, etc. In this article I'll show you how to set up routes in React with a library called React Router.

<br>

Before you can start you should make sure you have the proper packages and tools installed. <br>

<br>

### Node & NPM

&nbsp;&nbsp;&nbsp;&nbsp;Node is the environment that runs JavaScript frameworks and libraries like React and is essential for projects like these. NPM is the package manager for Node, and that basically means NPM installs the required files to use React and other libraries. We will use it later in this article to install libraries.

[Install Node.js](https://nodejs.dev/)

<br>

### Text Editor

&nbsp;&nbsp;&nbsp;&nbsp;To put it simply, a text editor is just the application on your computer that will edit the text files to create the React app. My personal choice is one called VSCode, but there are other good options like Sublime Text, Notepad++, & Atom, but even your default text editor can get the job done.

[Install VSCode](https://code.visualstudio.com/)

<br>


<br>

### Step 1: Creating React App

&nbsp;&nbsp;&nbsp;&nbsp;To initiate the React app we'll use a tool that's gonna make the process much simpler. Run the command below to create the React app. 

```shell
npx create-react-app reactrouterapp
```

``npx`` is a package bundled with ``npm`` and is used to execute. 

```shell
cd reactrouterapp
```

``cd`` will move us into the directory for the React app.

```shell
npm i react-router react-router-dom
```

This command installs the required packages for this app. 

<br>



### Step 2: Adding Routes
	
&nbsp;&nbsp;&nbsp;&nbsp;In this step we will create the app's routes and route outputs. First open the ``/src`` folder inside the ``reactrouterapp`` directory.
Create a new file named ``Page.js`` and type the following

```js
	function Page() {
		return(
			<h1>This is the Page component</h1>
			);
	}
	export default Page;
```

&nbsp;&nbsp;&nbsp;&nbsp;The function ``Page()`` returns a JSX object in its' ``return`` statement. The ``export default`` statement at the bottom lets us use this in other files, very convenient.

Next, change the contents of ``App.js`` to the following:

```js
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Page from './Page'

	function App() {
	  return (
	    <div className="App">
	      <Router>
	        <Routes>
	          <Route path="/page" element={<Page />} />
	        </Routes>
	      </Router>
	    </div>
	  );
	}

	export default App;
```

&nbsp;&nbsp;&nbsp;&nbsp;The first line imports from the React Router library, and it imports three components for our routing

```js
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
```

&nbsp;&nbsp;&nbsp;&nbsp;The second line imports from our ``Page.js`` file from earlier, and it imports the ``<Page />`` component we created earlier.

The function ``App()`` returns this:

```js
	    <div className="App">
	      <Router>
	        <Routes>
	          <Route path="/page" element={<Page />} />
	        </Routes>
	      </Router>
	    </div>
```

&nbsp;&nbsp;&nbsp;&nbsp;Routes holds the routes and with the ``path=`` parameter can have a prefix. ``<Route>`` defines the specific routes, their paths, and the elements rendered (in this example that's our ``<Page />`` component).

The app will return the ``<Page />`` element when the ``/page`` route is visited.

<br>

### Step 3: Running


To run the app run the follow command:

```shell
$ npm start
```
	

The out put should be something like this.

```shell
	Compiled successfully!

	You can now view reactrouterapp in the browser.

	  Local:            http://localhost:3000
	  On Your Network:  http://10.0.0.87:3000

	Note that the development build is not optimized.
	To create a production build, use npm run build.

	assets by status 6.93 KiB [cached] 1 asset
	assets by chunk 1.6 MiB (name: main)
	  asset static/js/bundle.js 1.53 MiB [emitted] (name: main) 1 related asset
	  asset main.cdf5e8aba95c1b3dac48.hot-update.js 71.4 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
	assets by path *.json 611 bytes
	  asset asset-manifest.json 583 bytes [emitted]
	  asset main.cdf5e8aba95c1b3dac48.hot-update.json 28 bytes [emitted] [immutable] [hmr]
	asset index.html 1.67 KiB [emitted]
	Entrypoint main 1.6 MiB (1.62 MiB) = static/js/bundle.js 1.53 MiB main.cdf5e8aba95c1b3dac48.hot-update.js 71.4 KiB 2 auxiliary assets
	cached modules 1.41 MiB [cached] 107 modules
	runtime modules 31.3 KiB 15 modules
	javascript modules 3.95 KiB
	  ./src/index.js 1.81 KiB [code generated]
	  ./src/App.js 2.14 KiB [built] [code generated]
	webpack 5.67.0 compiled successfully in 75 ms
```

&nbsp;&nbsp;&nbsp;&nbsp;Visit the link in the output, either one of them, and then visit the ``/page`` route and you should see something like this.

![Successfully run React app with React Router](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ceqc6i3r2f5v0n3g25qk.png)
 

&nbsp;&nbsp;&nbsp;&nbsp;Congrats! You quickly created a React app with routes using React Router. Understanding & using routes and routing is a crucial skill for a wev developer, this will come up often in projects or on the job.

<br>


#### Sources

[React Router v6](https://reactrouter.com/docs/en/v6) 
[Create-React-App](https://create-react-app.dev)
[React](https://reactjs.org)
[Node.js](https://nodejs.org/en)
[Npm](https://docs.npmjs.com)
[VSCode](https://code.visualstudio.com)
[Npx](https://www.npmjs.com/package/npx)