在路由过程中，当我从登录页移动到注册页时，Css不会呈现。

Question

当我从登录页移到注册页面时，CSS不会改变。

它只是给我展示了登录页面的CSS。它正在移动到注册页面。我不知道这是怎么回事。

当我移动到注册页面时，有人能告诉我如何呈现registration.css吗？

提前谢谢。下面是我的代码片段：

App.js:

import React from 'react';
import Login from './htmlfiles/Login';
import Register from './htmlfiles/Register';
import Buttons from './htmlfiles/Buttons';
import Change from './htmlfiles/Change';
import {BrowserRouter as Router, Route} from 'react-router-dom';


function App() {
    return (
        <div>
            <Router>
              <Route path="/"exact strict component={Login}/>
              <Route path="/Register" exact strict component={Register}/>  
              <Route path ="/Buttons" exact strict component={Buttons}/>
              <Route path ="/Change" exact strict component={Change}/>
            </Router>
        </div>
      );
}

export default App;

Login.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'react-bootstrap';
import Avatar from 'react-avatar';
import '../cssfile/Login.css';
import avatar from '../image.png';
import { Formik} from 'formik';
import * as yup from 'yup';
import { Link } from 'react-router-dom';
const Login = (history) => (
    <Formik
    initialValues={{
        UserName:'',
        Password:''
    }}
    onSubmit={(value)=>
    {
        console.log("The values are",value);
        // history.push('./Register')
    }}
    validationSchema={yup.object(
        {
            UserName:yup.string()
               .required('Required')
               .min(4,'Minimum 4 characters required')
               .max(8,'Maximum limit is 8 characters'),
            Password:yup.string()
               .required('Required')
               .min(4,'Minimum 4 characters required')
               .max(8,'Maximum limit is 8 characters')
        }
    )}
    >
    {({handleChange,handleSubmit,errors,values})=> (
        <div className="contain">
        <div className="card">
        <h5 className="card-title">Login</h5>
        <div className="card-body">
        <div className="avatar">
            <Avatar src={avatar} round={true} size="100"/>
            </div>
        <form onSubmit={handleSubmit} action='/Register'>
            <div className="form-group">
            <label>User Name:</label>
            <input 
            type="text" 
            className={errors.UserName ? "form-control is-invalid":"form-control"}
            onChange={handleChange}
             name="UserName" 
             value={values.UserName}
             />
            {errors.UserName ? <div className="text-danger" style={{height:'0px'}}>*{errors.UserName}*</div>:null}
            </div>
            <div className="form-group">
            <label>Password:</label>
            <input 
            type="password" 
            className={errors.Password ? "form-control is-invalid":"form-control"}
            onChange={handleChange} 
            name="Password"
            value={values.Password}
            />
            {errors.Password ?<div className="text-danger" style={{height:'0px'}}> *{errors.Password}*</div>:null}
            </div>
            <div className="button">
            <Button type="submit" className="btn-lg btn-block">Submit</Button>
            </div>
            </form>
            <Link to="./Register" id="p">Don't have an account?</Link>
        </div>
      </div>
      </div>
    )
    }
 </Formik>
);
export default Login;

Register.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'react-bootstrap';
import Avatar from 'react-avatar';
import '../cssfile/Register.css';
import avatar from '../image.png';
import { Formik} from 'formik';
import * as yup from 'yup';
const phone = /[7-9]{1}[0-9]{4}[0-9]{5}$/;
const Register = () => (
    <Formik
    initialValues={{
        UserName:'',
        email:'',
        mobile:'',
        Password:'',
        CPassword:''
    }}
    onSubmit={(value)=>
    {
        console.log("The values are",value);
    }}
    validationSchema={yup.object(
        {
            UserName:yup.string()
               .required('Required')
               .min(4,'Minimum 4 characters required')
               .max(8,'Maximum limit is 8 characters'),
            email:yup.string()
                .required('Required')
                .email('Email-id is invalid'),
            mobile:yup.string()
                .required('Required') 
                .matches(phone,'Phone number is invalid'),  
            Password:yup.string()
               .required('Required')
               .min(4,'Minimum 4 characters required')
               .max(8,'Maximum limit is 8 characters'),
            CPassword:yup.string()
                .required('Required')
                .oneOf([yup.ref('Password'),null],"Password doesn't match")   
        }
    )}
    >
    {({handleChange,handleSubmit,errors,values})=> (
        <div className='contain'>
        <div className="card">
        <h5 className="card-title">Registeration</h5>
        <div className="card-body">
        <div className="avatar">
            <Avatar src={avatar} round={true} size="90"/>
            </div>
        <form onSubmit={handleSubmit} action='/Login'>
            <div className="form-group">
            <label>UserName:</label>
            <input 
            type="text" 
            className={errors.UserName ? "form-control is-invalid":"form-control"}
            onChange={handleChange} 
            name="UserName"
            value={values.UserName}/>
            {errors.UserName ?<div className="text-danger" style={{height:'0px'}}> *{errors.UserName}*</div>:null}
            </div>
            <div className="form-group">
            <label>Email id:</label>
            <input 
            type="text" 
            className={errors.email ? "form-control is-invalid":"form-control"}
            onChange={handleChange} 
            name="email"
            value={values.email}/>
            {errors.email ?<div className="text-danger" style={{height:'0px'}}> *{errors.email}*</div>:null}
            </div>
            <div className="form-group">
            <label>Phone Number:</label>
            <input 
            type="text" 
            className={errors.mobile ? "form-control is-invalid":"form-control"}
            onChange={handleChange} 
            name="mobile"
            value={values.mobile}/>
            {errors.mobile ?<div className="text-danger" style={{height:'0px'}}> *{errors.mobile}*</div>:null}
            </div>
            <div className="form-group">
            <label>Password:</label>
            <input 
            type="text" 
            className={errors.Password ? "form-control is-invalid":"form-control"}
            onChange={handleChange} 
            name="Password"
            value={values.Password}/>
            {errors.Password ?<div className="text-danger" style={{height:'0px'}}> *{errors.Password}*</div>:null}
            </div>
            <div className="form-group">
            <label>Confirm Password:</label>
            <input 
            type="text" 
            className={errors.CPassword ? "form-control is-invalid":"form-control"}
            onChange={handleChange} 
            name="CPassword"
            value={values.CPassword}/>
            {errors.CPassword ?<div className="text-danger" style={{height:'0px'}}> *{errors.CPassword}*</div>:null}
            </div>
            <div className="button">
            <Button type="submit" className="btn-lg btn-block">Register</Button>
            </div>
            </form>
        </div>
      </div>
      </div>
    )
    }
 </Formik>
);
export default Register;

Login.css

    .card
    {
        width: 20%;
        height:80%;
        margin-left: 600px;
        background-color:grey;
    }
    .card-title
    {
        text-align: center;
        padding-top: 80px;
    }
    .contain
    {
        width:100%;
        height: 100%;
        padding-top: 150px;
        background-color:rgb(250, 112, 112);
    }
    .button
    {
        margin-top: 30px;
    }
    .card-body
    {
       position:relative;
       bottom: 100px;
    }
     .avatar
    {
        position: relative;
        bottom: 90px;
        left: 80px;
    } 
    #p{
        margin-left: 50px;
        color:blue;
        text-decoration: underline;
        cursor: pointer;
    }
**Register.css**
.card
{
    width: 40%;
    height:95%;
    margin-left: 450px;
    background-color:grey;
}
.card-title
{
    text-align: center;
    padding-top: 50px;
}
.contain
{
    width:100%;
    height: 100%;
    padding-top: 80px;
    background-color:rgb(250, 112, 112);
}
.button
{
    margin-top: 30px;
}
.card-body
{
   position:relative;
   bottom: 110px;
}
 .avatar
{
    position: relative;
    left: 240px;
    bottom: 40px;
} 

Answer 1

您需要像描述的这里那样使用CSS模块。

因此，您需要按照该链接中描述的约定重命名css文件。所以改名

Register.css to Register.module.css，Login.css to Login.module.css

现在，您需要在您的js文件中导入它们，如下所示：

*** Register.js ***
import style from '../cssfile/Register.module.css';

*** Login.js ***
import style from '../cssfile/Login.module.css';

然后在组件中，而不是：

className="contain"

你得做：

className={style.contain}

现在，重构所有像这样的className用法，它将像预期的那样工作。