如何使用react-router在React中设置动态路由

Question

我想为以下路线添加动态路线，但每当我添加它时。我的CSS没有加载。我正在使用react-router-dom 4.1.1

我在index.html页面直接导入我的CSS。我只有一个css文件，我直接在index.html中导入。 我在控制台上收到此错误。

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

我的CSS文件路径也在变化

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

应该是这样的

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

这意味着用户也会被添加到CSS文件路径中。

这是我的路线：

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;

我想添加另一条路线：

<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"
  }

}