​ 动态路由在Router组件的path属性: {/url/:parameter} 1<Router path='/xxx/:id' component={xxx} /> Switch组件配置404页面：

React路由基础组件: 1.路由组件(router components) <BrowserRouter> （推荐）和<HashRouter>两种路由组件 Eg: 1234567import { BrowserRouter } from "react-router-dom";ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root')) 2.路由匹配组件（router matching components) <Route>和<Switch>路由匹配组件。

前段路由是一套映射规则，在React中，是URL路径与组件的对应关系。就是配置路径和组件（一一对应） 1.React路由安装： 1$ npm i react-router-dom 2.导入路由的三个核心组件：Router / Route / Link 1import { BrowserRouter as Router , Route, LInk } from 'react-router-dom' 3.使用Router组件包裹整个应用（重要！！！）

使用脚手架初始化项目： 1.初始化项目，命令npx create-react-app xxx 2.启动项目，在项目根目录执行命令：npm start 12345678910public/ // 公共资源 index.html // 首页（必须） manifest.jsonsrc / index.js // 项目入口文件（必须） App.js // 项目的根组件 App.test.js // App组件的测试文件 serviceworker.js // 实现pwa（可选） 扩展：

常见的动画效果：动画或效果一旦触发就会执行，如果触发多次，就造成多个动画或效果排队执行。但可以停止动画排队：stop() 显示隐藏 滑入滑出 淡入淡出 自定义动画 show() slideDown() fadein() animate() hide() slideUp() fadeOut() toggle() slideToggle() fadeToggle() fadeTo()××× [speed,[easing],[fn] [speed,[easing],[fn] [speed,[easing],[fn] [params,speed,[easing],[fn] 显示语法：show([speed,[easing],[fn] )

受控组件(双向绑定（v-model）)：