javascript - 如何使用react js为不同页面使用不同的CSS文件

Question

我正在构建我的第一个 React 应用程序，但遇到了问题!我正在尝试对不同的路线使用不同的 css 文件。但是当我导入第二个 css 文件(loginpage.css)时，第一页(主页)正在改变!

如何按页使用 css 文件？

感谢您的帮助!

import React from 'react';
import PropTypes from 'prop-types'
import { Route } from 'react-router-dom';
import HomePage  from './components/pages/HomePage';
import LoginPage from './components/pages/LoginPage';
import DashboardPage from './components/pages/DashboardPage';
import SignupPage from './components/pages/SignupPage';
import ConfirmationPage from './components/pages/ConfirmationPage';
import UserRoute from './components/routes/UserRoute';
import GuestRoute from './components/routes/GuestRoute';
import './static/stylesheets/default.css';
import './static/stylesheets/pandoc-code-highlight.css';
import styles from './static/stylesheets/homepage.css';
import styles1 from './static/stylesheets/loginpage.css';


const App = ({ location }) => (
	<div classname="">
		<div classname={styles}>
			<Route location={location} path="/" exact component={HomePage} />
		</div>
        <div className={styles1.app}>
            <GuestRoute location={location} path="/login" exact component={LoginPage} />
        </div>
		<Route location={location} path="/confirmation/:token" exact component={ConfirmationPage} />
		<GuestRoute location={location} path="/signup" exact component={SignupPage} />
		<UserRoute location={location} path="/dashboard" exact component={DashboardPage} />
	</div>
);

Answer 1

您可以使用 Prop 来做到这一点:

const Front = (props) => {
    if(props.match.params.page === 'home'){
        require("./css/bootstrap.min.css");
        require("./css/style.css");
        require("./css/vendors.css");
        require("./css/custom.css");
    }
    return (
        <div>
            <Header />
            { props.match.params.page === 'home' ? <Login /> : null }

        </div>
    )
}