Gaurav Singhal

How to Change Page Background Color with Each Route

Gaurav Singhal

Nov 7, 2019
7 Min read
50,374 Views

Nov 7, 2019
7 Min read
50,374 Views

Web Development

React

Introduction

In this short guide, I'll be showing you how to display a different background color for each route. Depending on a particular use case, you might want to change the background color for each route of your application. In this guide, we’ll learn how to achieve that in React world using modern methods. This will also enhance your understanding of CSS in JS.

Following are the page components we’ll use in this example.

1function Index() {
2  return (
3    <>
4      <h2>Home</h2>
5      <p>This is the Home Page</p>
6    </>
7  );
8}
9
10function About() {
11  return (
12    <>
13      <h2>About</h2>
14      <p>This is the About Page</p>
15    </>
16  );
17}
18
19function Users() {
20  return (
21    <>
22      <h2>Users</h2>
23      <p>This is the Users Page</p>
24    </>
25  );
26}

jsx

Adding the Router to Our Project

We need to install react-router-dom for this example, so run the following command in the command-line utility.

1npm install --save react-router-dom

console

After installation, we need to import from react-router-dom.

1import { BrowserRouter as Router, Route, Link } from "react-router-dom";

jsx

Building the Root Component

In the main component, the color property changes according to the current route. The mapping of colors is as follows:

Home page -> #282c34

About page -> #9c27b0

Users page -> #007bff

Finally, the <App /> component looks as follows:

1class App extends Component {
2  constructor(props) {
3    super(props);
4    this.state = { color: "#282c34" };
5  }
6
7  // ..
8
9  render() {
10    return (
11      <div style={{ background: this.state.color }} id="main">
12        <Router>
13          <div>
14            <nav>
15              <ul>
16                <li>
17                  <Link to="/">Home</Link>
18                </li>
19                <li>
20                  <Link to="/about/">About</Link>
21                </li>
22                <li>
23                  <Link to="/users/">Users</Link>
24                </li>
25              </ul>
26            </nav>
27
28            <Route path="/" exact component={Index} />
29            <Route path="/about/" component={About} />
30            <Route path="/users/" component={Users} />
31          </div>
32        </Router>
33      </div>
34    );
35  }
36}

jsx

We wrap the <Router /> component inside a div, which is the main element that has the backgroundColor key in its style prop.

We declare each router using the <Route /> component, create links to each route using the <Link /> component and specify the URL key in the path prop. We also need to specify the component for the route in the component prop.

In the click handler function of the <Link /> component, we change the color state of the component.

1<Link to="/" onClick={() => this.changeColor("#282c34")}>
2  Home
3</Link>

jsx

1changeColor = color => {
2  this.setState({ color });
3};

jsx

Complete Code

This section contains the complete source code for your reference.

index.js

1import React, { Component } from "react";
2import ReactDOM from "react-dom";
3import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4
5import "./styles.css";
6
7function Index() {
8  return (
9    <>
10      <h2>Home</h2>
11      <p>This is the Home Page</p>
12    </>
13  );
14}
15
16function About() {
17  return (
18    <>
19      <h2>About</h2>
20      <p>This is the About Page</p>
21    </>
22  );
23}
24
25function Users() {
26  return (
27    <>
28      <h2>Users</h2>
29      <p>This is the Users Page</p>
30    </>
31  );
32}
33
34class App extends Component {
35  constructor(props) {
36    super(props);
37    this.state = { color: "#282c34" };
38  }
39
40  changeColor = color => {
41    this.setState({ color });
42  };
43
44  render() {
45    return (
46      <div style={{ background: this.state.color }} id="main">
47        <Router>
48          <div>
49            <nav>
50              <ul>
51                <li>
52                  <Link to="/" onClick={() => this.changeColor("#282c34")}>
53                    Home
54                  </Link>
55                </li>
56                <li>
57                  <Link
58                    to="/about/"
59                    onClick={() => this.changeColor("#9c27b0")}
60                  >
61                    About
62                  </Link>
63                </li>
64                <li>
65                  <Link
66                    to="/users/"
67                    onClick={() => this.changeColor("#007bff")}
68                  >
69                    Users
70                  </Link>
71                </li>
72              </ul>
73            </nav>
74
75            <Route path="/" exact component={Index} />
76            <Route path="/about/" component={About} />
77            <Route path="/users/" component={Users} />
78          </div>
79        </Router>
80      </div>
81    );
82  }
83}
84
85ReactDOM.render(<App />, document.getElementById("root"));

jsx

styles.css

1body {
2  margin: 0;
3  font-family: sans-serif;
4}
5
6.App {
7  font-family: sans-serif;
8  text-align: center;
9}
10
11#main {
12  height: 100vh;
13  padding: 0px 24px;
14}
15
16nav ul {
17  list-style: none;
18  padding: 0px;
19}
20
21nav ul li {
22  display: inline-block;
23  margin: 0px 10px;
24}
25
26nav ul li:first-child {
27  margin-left: 0px;
28}
29
30nav ul li a {
31  color: #fff;
32}
33
34nav {
35  display: flex;
36}
37
38h2,
39p {
40  color: #fff;
41}

css

Bonus: Refactor the Class Component into a Functional Component

Earlier, if we wanted to add state to our component, we'd have to convert the functional component into a class component extending the React.Component class. However, with the introduction of hooks, we can add state to a functional component itself.

We can add state to the component using the new useState() method. It takes a single argument which is the initial value of the state. It returns an array that contains two elements: the state itself and the function to update that state.

So after refactoring, our component will look as follows:

1function App() {
2  const [color, changeColor] = useState("#282c34");
3  return (
4    <div style={{ background: color }} id="main">
5      <Router>
6        <div>
7          <nav>
8            <ul>
9              <li>
10                <Link to="/" onClick={() => changeColor("#282c34")}>
11                  Home
12                </Link>
13              </li>
14              <li>
15                <Link to="/about/" onClick={() => changeColor("#9c27b0")}>
16                  About
17                </Link>
18              </li>
19              <li>
20                <Link to="/users/" onClick={() => changeColor("#007bff")}>
21                  Users
22                </Link>
23              </li>
24            </ul>
25          </nav>
26
27          <Route path="/" exact component={Index} />
28          <Route path="/about/" component={About} />
29          <Route path="/users/" component={Users} />
30        </div>
31      </Router>
32    </div>
33  );
34}

jsx

We use array destructuring to retrieve the elements from useState() as recommended in the React documentation. In the onClick handler, we use the changeColor() function and pass the new color to it.

Conclusion

In this guide, we learned to change the background color of the route by storing the colors in the state and manipulating it by the onClick handler using React hooks. I hope you have a good sense of React hooks after reading this guide.

LEARN MORE