【发布时间】：2019-06-24 16:19:30
【问题描述】：
我在使用简单的 Bootstrap/HTML 模板时遇到了 React 应用前端的问题。所有页面都可以正常工作，除非我路由到带有参数的页面（例如：/user/1），所以它完全失去了它的风格。
顺便说一句，我将 styleSheet 链接到 /public/index.html 应用.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Nav, Navbar, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import './App.css';
import Routes from './Routes';
import Header from './components/Header';
class App extends Component {
render() {
return (
<div>
<Header />
<div
style={{
marginLeft: '5%',
border: 'solid 1px',
marginRight: '5%',
marginTop: '2.5%',
padding: '1%'
}}
>
<Routes />
</div>
</div>
);
}
}
export default App;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3 /umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Router.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import NotFound from './NotFound';
import Login from './Login';
import Signup from './Signup';
import Products from './Products/Products';
import Categories from './Categories/Categories';
import ViewCategorie from './Categories/ViewCategorie';
import AddVariation from './Products/AddVariation';
import ViewProduct from './Products/ViewProduct';
import User from './components/User';
import UserView from './components/UserView';
export default () => (
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={Signup} />
<Route exact path="/categories" component={Categories} />
<Route exact path="/viewcategorie/:id" component={ViewCategorie} />
<Route exact path="/products" component={Products} />
<Route exact path="/addvariation/:id" component={AddVariation} />
<Route exact path="/viewproduct/:id" component={ViewProduct} />
<Route exact path="/user" component={User} />
<Route exact path="/user/:id" component={UserView} />
<Route component={NotFound} />
</Switch>
);这些是我页面的截图
2-but on evey page with params it loses the style
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
serviceWorker.unregister();【问题讨论】：
标签： css reactjs react-router