Question

我在使用一个简单的Bootstrap / HTML模板的React app Front-end遇到了这个问题。一切都适用于所有页面，除非我转到带有参数的页面（例如：/ user / 1），所以它完全失去了风格。

我在/public/index.html中链接了styleSheet 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- as you see, it works here

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();

Answer 1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="theme-color" content="#000000" />
  <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="Colo Shop Template">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
  <link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
  <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
  <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
  <link rel="stylesheet" type="text/css" href="styles/main_styles.css">
  <link rel="stylesheet" type="text/css" href="styles/responsive.css">


  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>Dream Life</title>
</head>

为什么我通过参数时React前端会失去样式？

1 个答案: