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}
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
After installation, we need to import from react-router-dom.
1import { BrowserRouter as Router, Route, Link } from "react-router-dom";
In the main component, the color property changes according to the current route. The mapping of colors is as follows:
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}
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>
1changeColor = color => {
2 this.setState({ color });
3};
This section contains the complete source code for your reference.
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"));
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}
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}
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.
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.