У меня есть эта проблема с интерфейсом приложения React, где я использую простой шаблон Bootstrap / HTML.все прекрасно работает со всеми страницами, за исключением случаев, когда я перенаправляю на страницу с параметрами (пример: / user / 1), поэтому он полностью теряет свой стиль.
кстати я связываю таблицу стилей в /public/index.html App.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>
);
и это скриншоты для моих страниц
1- как видите, здесь работает
2- но на каждой странице с параметрами он теряет стиль
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();