安装第三方路由插件
npm i react-router-dom
相关内容介绍
BrowserRouter 路由容器组件
Route 渲染路由匹配的视图(类似于vue中的router-view)
link 进行路由跳转的入口(类似于vue中的router-link)
实例如下:
import { Component } from "react";
import {BrowserRouter as Router, Route} from 'react-router-dom'
import Login from '../views/login/index.js'
import Home from '../views/home/index.js'
class MainPage extends Component{render() {return(Login}/>Home}/> )}
}
export default MainPage
在webpack.config.js中配置sass全局变量
安装npm install sass-resources-loader --save-dev
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;{test: sassRegex,exclude: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'icss',},},'sass-loader').concat({loader: 'sass-resources-loader',options: {resources: [// 这里按照你的文件路径填写path.resolve(__dirname, '../src/assets/index.scss')]}}),sideEffects: true,},// Adds support for CSS Modules, but using SASS// using the extension .module.scss or .module.sass{test: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'local',getLocalIdent: getCSSModuleLocalIdent,},},'sass-loader').concat({loader: 'sass-resources-loader',options: {resources: [// 这里按照你的文件路径填写path.resolve(__dirname, '../src/assets/index.scss')]}})
}
错误案例 onClick={this.fn(‘xxx’)}
写成上述这个样子fn方法就直接执行了我们需要的是点击的时候执行并且传递对应的参数
解决方案一: onClick= {()=>{this.fn(‘xxx’)}}
解决方案二:onClick={this.fn.bind(this,‘xxx’)}
{__html:'nnnnn
'}}>