Setup an easy ReactJS Router Component for SPA
Let’s make a micro SPA using ReactJS and react-router-dom plugin!
ReactJS is a not-so-opinionated framework, so anyone can freely create the best solution for them. For my solution, I decided to make my own <AppRouter />
component to create a multi-page feel.
This project is in GitHub!
Create a ReactJS app
npx create-react-app react_spa_router_demo
Run the app!
cd react_spa_router_demo
npm start
Clean up App.js of defaults
To initialize setup for the Router component and Pages, let’s take out the defaults that came with the App.js
file.
The App.js
should now look like this:
import React from "react";
import './App.css';
function App() {
return (
<div id="app" classname="container">
<h1>Hi</h1>
</div>
)
}
export default App;
And the home page should look like:
Install React Router Plugin
npm install --save react-router-dom
Create two “Pages”
All SPA’s technically have just one real index.html
file. But we’ll make .js
files to give a multi-page feel.
In the src
folder, make a folder named container
.
Page1 files and content
Inside container
folder, make a Page1
folder. And inside this folder, make Page1.js
and Page1.css
This is the code for Page1’s content.
import React from "react";
export default function Page1() {
return (
<div className="page page1">
<h1>Page One</h1>
</div>
)
}
Page2 files and content
Similar to Page1, create a Page2
folder inside container
. And, make the Page2.js
and Page2.css
.
import React from "react";
export default function Page1() {
return (
<div className="page page2">
<h1>Page Two!!!</h1>
</div>
)
}
Make the Router component
We finally got here! This is the ReactJS Router component that will define paths of the “page” or container components.
Create the router file in the src
folder and name it AppRouter.js
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Page1 from './containers/Page1/Page1';
import Page2 from './containers/Page2/Page2';
export default function AppRouter() {
return (
<Switch>
<Route exact path='/' component={Page1}/>
<Route exact path='/page2' component={Page2}/>
</Switch>
);
};
In the above code, we imported Switch
and Route
from the react-router-dom plugin.
Switch
does the logic of which React Page component to show based on the path.
Route
is used to configure which component is to which path. It also has the exact
attribute built-in to make sure that if a user is on the home page path /
it should show Page1. If the url on the browser is /page2
, it should show Page2
component.
Add the BrowserRouter component
The BrowserRouter
is a component from react-router-dom
. This is really the component that kickstarts the app to have the SPA multi-page feel. Without this, the <AppRouter/>
won’t work.
We include it in the index.js
by using it as a wrapper around <App/>
. Below is what the index.js
file should look like:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'));
serviceWorker.unregister();
Add AppRouter.js to App.js
To include the <AppRouter />
component that we just made, we import it and then add its instance inside the return
statement.
import React from "react";
import './App.css';
import AppRouter from './AppRouter';
function App() {
return (
<div id="app" className="container">
<AppRouter />
</div>
)
}
export default App;
By placing the <AppRouter />
inside <App />
, we are defining the “page” components and their paths globally.
Let’s go to the pages!
On your browser, type in localhost:3000
if you’re not there yet. You should see the contents of Page1.js
.
To go to page two, type in localhost:3000/page2
, and you should see Page2.js
‘s content.
Bonus: Add a navigation bar
A real SPA with a multi-page feel will have some sort of navigation bar for the site’s visitors. So instead of the visitors typing the url, they should be clicking from a navigation menu.
I’m going to call this component <HeaderBar />
. It’s a re-usable kind of component in a sense that it doesn’t serve as a “container” or a “page” component. “Page” components or “containers” can be re-used depending on how they’re dynamically structured. But it’s beyond the topic of this article.
To get started:
- In the
src
folder, create acomponents
folder, if it doesn’t exist yet. - Create a
HeaderBar
folder inside thatcomponents
folder. - Inside the
HeaderBar
folder, create aHeaderBar.js
and aHeaderBar.css
.
The HeaderBar.js
should look like the code below.
import React from 'react';
import { NavLink } from 'react-router-dom';
import './HeaderBar.css';
export default function HeaderBar() {
return (
<nav role="main">
<NavLink to='/'>Page1</NavLink>
<NavLink to='/page2'>Page2</NavLink>
</nav>
);
};
Add the HeaderBar
to the <App />
import React from "react";
import './App.css';
import AppRouter from './AppRouter';
import HeaderBar from './components/HeaderBar/HeaderBar';
import
function App() {
return (
<div id="app" className="container">
<HeaderBar />
<AppRouter />
</div>
)
}
export default App;
The homepage localhost:3000
should look like this with the HeaderBar
component.
And if you click “Page2” in the navigation, the browser’s address bar should look like localhost:3000/page2
and the content of Page2.js
should show up.