声明式设计 虚拟 Dom 减少与真实 Dom 的交互 灵活具有丰富的 React 组件库 单项数据流，不像 Vue 的双向绑定。

JSX 语法

本质上就是在 JS 的基础上添加了 html 的标签结构。

Hooks

路由

import {Link,BrowserRouter,Route} from 'react-router-dom';

<Switch>// 外层套 Switch组件 防止穿透效果
	<BrowserRouter> // 浏览器路由模式
		<Link to= "组件地址" /> // <Link to="/uri">组件名称</Link>
		<NavLink > // 同Link,多了一个ActiveClassName  选中时的样式
		<Route path = "路由地址" component={组件名称}/>  
	</BrowserRouter>
</Switch>

路由组件与普通组件的差异

• 写法
  • 普通组件:
  • 路由组件: <Route component = {Demo}/>
• 存放位置
  • 普通组件 : components
  • 路由组件: pages
• Props 内容
  • 普通组件: 传什么有什么
  • 路由组件: 固定属性.

针对普通组件的 props 中没有路由组件属性的解决方案: withRouter

impl {withRouter} from react

export default withRouter(YourComponent)

路由传递的 Props

• history：
• location：
• match：

重定向 Redirect

<Redirect to = "/path" />