React 路由知识点

1.react 项目构建 npm install -g create-react-app npm create-react-app router 这样就构建了一个名字为 router 的项目，接下来我们就安装route npm add react-router-dom 2. 在项目中引入router 引入的方式如下： ** import {Link,Route,BrowserRouter,Switch,Redirect} from 'react-router-dom'** 涉及知识点： BrowserRouter 在项目的外层包裹上这个router Link 标签的 to 属性后面指定要跳转的路由 Route 标签 path指定路由地址 component指定模块 exact 属性指定精确匹配 Swith 标签 切换找到了第一个要的地址后就不再往后寻找 3.路由传参 data 为需要传递的参数 Route Props 里以下内容 match 当前匹配路由信息 location 对象 history 对象 this.props.route.history.push('/') this.props.route.history.goBack() // 返回历史记录的上一步 4.路由里的重定向 <Route path="/" render={(e) => { console.log(e) return ( <Main data={data} > ) }}>

3.具体路由代码如下： import React from 'react'; import ReactDOM from 'react-dom'; import {Link,Route,BrowserRouter,Switch} from 'react-router-dom' import List from './list' import Add from './add'

class App extends React.Component{ render() { return (

    )
}

}

ReactDOM.render(, document.getElementById('root'));