React Router Appears to Block Custom CSS

Question

I've been working on a React Bootstrap Navbar for my web app and have had some frustrations with styling it. Essentially, I am trying to set a custom background color for my navbar using custom CSS and classNames, but whether or not the color displays seems to depend on the route the user is visiting.

The colors display as expected when I visit any 'primary' route (eg. /, /about, and /donate appear like this). However, whenever I visit any 'secondary' routes, is seems like the CSS is just flat out ignored (for example /help/contact and /donate/methods appear like this). In all of the above examples, the base URL is localhost:3000. I am using React Router ('react-router-dom') to handle routing and React Bootstrap to create my navbar.

To apply the custom background color, I simply added a className to the Navbar object:

'../components/AppNavBar'

<Navbar variant="light" className=custom-color-1>
  *Navbar contents*
</Navbar>

and selected this class in a custom CSS file linked directly to index.html:

.custom-color-1 {
  background-color: #B3E5FC;
}

These are the tests I ran that led me to this conclusion:

Accessing the home page from '/' or '/ff' displays the navbar normally, but accessing the same page through '/ff/ff' causes the navbar to turn white.
After creating two nearly identical, minimalistic pages, and routing one to '/test' and the other to '/test/route', the former displays normally and the latter turns white. The only difference between these two files are the file and export names. An example of one of these is provided below.

import React from 'react';

import AppNavBar from '../components/AppNavBar';

const TestPage1 = () => {
    return(
        <>
            <AppNavBar />
            Sample text.
        </>
    );
};

export default TestPage1;

Furthermore, when using Chrome DevTools, the DOM appears to be identical between the two pages. This is the part that baffles me the most. On the pages where the style applies appropriately, I can see my custom className appear in the 'styles' tab of the DevTools panel with the appropriate backgroundColor property. On the other pages, it disappears altogether! The only factor that seems to affect this behavior is the route that each page is mapped to. Is this a bug with React Router, or am I simply overlooking something?

I ran a similar test with text colors on some pages. On the pages where the navbar styles properly, I am able to change the color of any text item (h3, p, etc.) using a className and custom CSS (using the color: #FAFAFA; property). On pages where the navbar does not style properly, I am unable to change text colors. Therefore, it does not appear to be an issue with the React Bootstrap Navbar.

EDIT: Also noticed that I started getting "Resources interpreted as Stylesheet but transferred with MIME type text/html" errors for all of my custom stylesheets. A copy of my index.html file can be found in the sandbox I made, which reproduces my issue.

Done. This seems to model the behavior. All primary routes work properly, and all secondary routes fail to style the navbar, regardless of the page being displayed codesandbox.io/s/reactroutercss-iwexj — Riley
– Riley, Commented Jan 12, 2020 at 8:55
My apologies for not responding sooner. Updating the href for my stylesheets fixed the issue. Thanks! — Riley
– Riley, Commented Jan 13, 2020 at 19:06

Brett DeWoody · Accepted Answer · 2020-01-12 16:33:18Z

2

There are 2 issues I see here.

You are using a relative path to link to the stylesheet
You are not using the correct Link component

More details on the above:

You are using a relative path (./style.css) to link to your style.css file. This works on the top-level paths, since the relative path to the style.css is correct. But on the 2nd-level paths the relative path is no longer correct.

Change the link to the style.css to
```
<link rel="stylesheet" href="/style.css" />
```
You are not using the correct Link component, which compounds the issue above. Currently when a nav link is clicked the page is refreshed with the new route, instead of working as a single-page app.

You'll want to update the <Nav.Link> components to use the Link component, like this:
```
import { Link } from "react-router-dom";

<Nav.Link as={Link} to="/other/1">
```
Notice the as and to props. This will make the <Nav.Link> work as a <Link/> compontent and the app will work as a single-page app.

Also, since the <AppNavBar /> is used on every route you should look into moving it out of the individual route components so it's used across all routes.

edited Jan 12, 2020 at 16:33

answered Jan 12, 2020 at 10:52

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Riley Over a year ago

Hmm strangely, I thought I tried using the Link element previously to no avail. The main reason I switched over to Nav.Link was because Link was messing up the styling in the main navbar. But updating the CSS path and keeping the Nav.Links appears to work for now. Thank you so much!

Brett DeWoody Over a year ago

Two different things - Nav.Link is a Material UI component for displaying a nav link, Link is a react-router-dom component responsible for routing to a new view.

Riley Over a year ago

Would using Nav.Link in place of Link cause issues down the road when deploying the app?

Brett DeWoody Over a year ago

Depends, if you want your app to work as a SPA you want to use Link, or Nav.Link as Link.

Babak Yaghoobi · Accepted Answer · 2020-01-12 11:52:54Z

0

because you are using react-bootstrap's Nav.Link instead of react-router's {Link} component Nav.Link not a router

first import this in AppNavBar.js

import { Link } from 'react-router-dom';

then change this lines :

  <Nav.Link href="/other">Second page using route /other</Nav.Link>

  <Nav.Link href="/other/1">Second page using route /other/1</Nav.Link>

with:

  <Link to="/other">Second page using route /other</Link>

  <Link to="/other/1">Second page using route /other/1</Link>

changes : HERE

answered Jan 12, 2020 at 11:52

Babak Yaghoobi

1,99510 silver badges18 bronze badges

Collectives™ on Stack Overflow

React Router Appears to Block Custom CSS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related