Next Stop - React Router | SPA
React doesn't come with a built-in router, but we can easily achieve routing with the
react-router-dom library. Routing is how a web applications direct traffic.Example: If you go to dataworld.com, you end up on my home page. If you go to dataworld.com/me, you're redirected to my about me page. If you go to dataworld.com/categories/javascript or dataworld.com/categories/css, you end up on a category listing page. The routes for these pages look something like this:
/- root/:page_id- page/categories/:category_id- category
I'm not actually making a folder called
categories and filling it with a bunch of files like javascript.html or css.html, I just have one template and the router knows to direct to the proper template. Once it gets to the template, it can pull from the URL to know which variables to display - for example, JavaScript or CSS related posts.This website also happens to be a Single Page Application (or SPA) - only one page is loaded, and every click to a new page loads some additional JSON data, but does not actually request a new resource like loading
index.html and about-me.html would.I'm going to show you how to set up a simple SPA in React with
react-router-dom, and pull in data dynamically through the URL. Below is the source of the completed project if you get lost along the way.Prerequisites
- Read Getting Started with React or Build a React App with Hooks if you don't know React or React Hooks yet.
Create a new React app.
npx create-react-app react-router-example
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
Our project has two dependencies -
react-router-dom for the router, and axios for making API calls.npm install react-router-dom axios
or
yarn add react-router-dom axios
To use
react-router-dom, we need to wrap our entire App component in BrowserRouter. There are two types of routers:BrowserRouter- makes pretty URLs likeexample.com/about.HashRouter- makes URLs with theoctothorpe(or hashtag, if you will) that would look likeexample.com/#about.
Let's use
BrowserRouter.src/index.jsimport React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.querySelector('#root')
)
Now in
App.js, we can decide on the routes we want to use and direct accordingly. We'll use Routeand Switch for this task.Switch- Groups all your routes together, and ensures they take precedence from top-to-bottom.Route- Each individual route.
App.js
import React from 'react'
import { Route, Switch } from 'react-router-dom'
// We will create these two pages in a moment
import HomePage from './pages/HomePage'
import UserPage from './pages/UserPage'
export default function App() {
return (
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/:id" component={UserPage} />
</Switch>
)
}
We're matching the root route (
/) to HomePage, and dynamically matching any other page to UserPage. I only have one route for this simple example, but you could do more like this:<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/:id" component={UserPage} />
<Route path="/categories" component={CategoriesPage} />
<Route path="/categories/:id" component={IndividualCategoryPage} />
</Switch>
This would ensure that
dataworld.com/categories would go to a page listing all categories, but dataworld.com/categories/javascript would go to a completely different template for the individual category listing.In order to link to a page within the SPA, we'll use
Link. If we used the traditional <a href="/route">, it would make a completely new request and reload the page, so we have Linkto help us out.src/pages/HomePage.jsimport React, { Component } from 'react'
import { Link } from 'react-router-dom'
export default function HomePage() {
return (
<div className="container">
<h1>Home Page</h1>
<p>
<Link to="/taniarascia">taniarascia</Link> on GitHub.
</p>
</div>
)
}
So now I'm going to my first route, the root route which is loading
HomePage, and I see the content and the link.
router home page
Our
Link is navigating to /dataworld, which will match the /:id parameter in Route. In order to dynamically get the content from the URL - in this case, taniarascia - we'll use match.params.idfrom the props.I'm going to use that parameter to make a call to the GitHub API and retrieve my data. In this example I'll be using Hooks, so if you're not familiar with them, please read Building a CRUD App with Hooks.src/pages/UserPage.js <props.match.params.id>
import React, { useState, useEffect } from 'react'
import axios from 'axios'
export default function UserPage(props) {
// Setting initial state
const initialUserState = {
user: {},
loading: true,
}
// Getter and setter for user state
const [user, setUser] = useState(initialUserState)
// Using useEffect to retrieve data from an API (similar to componentDidMount in a class)
useEffect(() => {
const getUser = async () => {
// Pass our param (:id) to the API call
const { data } = await axios(`https://api.github.com/users/${props.match.params.id}`)
// Update state
setUser(data)
}
// Invoke the async function
getUser()
}, []) // Don't forget the `[]`, which will prevent useEffect from running in an infinite loop
// Return a table with some data from the API.
return user.loading ? (
<div>Loading...</div>
) : (
<div className="container">
<h1>{props.match.params.id}</h1>
<tab
<tbody>
<tr>
<td>{user.name}</td>
<td>{user.location}</td>
<td>
<a href={user.blog}>{user.blog}</a>
</td>
<td>{user.followers}</td>
</tr>
</tbody>
</table>
</div>
)
Last modified 3yr ago