CODEWITHSUNDEEP
cssreactjsreact-router
Riley
Riley

Reputation: 63

React Router Appears to Block Custom CSS

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:

  1. 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.
  2. 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.

Upvotes: 2

Views: 2238

Answers (2)

Brett DeWoody
Brett DeWoody

Reputation: 62763

There are 2 issues I see here.

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

More details on the above:

  1. 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" />

  2. 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.

Upvotes: 2

Babak Yaghoobi
Babak Yaghoobi

Reputation: 1985

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

Upvotes: 0

Related Questions