How to Configure Dynamic Routing in Reactive Router

I want to add a dynamic route to the following routes, but whenever I add it. My CSS is not loading. I usereact-router-dom 4.1.1

I am directly importing my CSS in the page index.html

. I only have one file css

that I directly import into index.html

. I am getting this error on the console.

Resource interpreted as Stylesheet but transferred with MIME type text/html:

And my css file path also changes

http://localhost:3000/users/css/demo.css

which should be like this

http://localhost:3000/css/demo.css

This means users are also added to the CSS file path.

Here are my routes:

import { BrowserRouter as Router, Route, NavLink }from 'react-router-dom';

class Routes extends Component {

  render() {
    return (
      <Router>
      <div>
        <header className="header-basic">
          <div className="header-limiter">
            <h1><NavLink exact to="/">Test</NavLink></h1>
            <nav>
              <NavLink activeClassName="selected" exact to="/">Sign Up</NavLink>
              <NavLink activeClassName="selected" to="/event">Create Event</NavLink>
              <NavLink activeClassName="selected" to="/users">Admin Page</NavLink>
              <NavLink activeClassName="selected" to="/eventlist">Events List</NavLink>
            </nav>
          </div>
        </header>
        <Route exact path="/" component={Registration} />
        <Route path="/users" component={AdminPage} />
        <Route path="/event" component={Event} />
        <Route path="/eventlist" component={EventList} />
        # When I am adding here I am able to get to the page but all my CSS is not loading. In fact plain text is coming.
      </div>
      </Router>
    );
  }
}

export default Routes;

      

I want to add another route:

<Route path="/users/:user" component={User} />

      

Package.json

{
  "name": "affairal",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.16.1",
    "react": "^15.5.4",
    "react-datepicker": "^0.46.0",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

      

}

+3


source to share





All Articles