React学习笔记-React路由

React路由

路由配置

• react-router 是浏览器和原生应用的通用部分

• react-router-native 是用于原生应用的

• react-router-dom 是用于浏览器的

BrowserRouter VS HashRouter

• – 都是路由的基本组件，需将其放在最外层，选其一使用
• – 内部只能含有一个子节点
• – BrowserRouter 的 URL 是指向真实 URL 的资源路径，页面和浏览器的 history 保持一致
• – HashRouter 使用 URL 中的 hash（#）部分去创建路由

//React路由引用
import { BrowserRouter as Router,Route,Link} from 'react-router-dom';

//React路由配置
import { render } from '@testing-library/react';
import React from 'react'
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';

const Home =()=>{
    return <div>Home</div>
}
const About =()=>{
    return <div>About</div>
}
const App = ()=>{
    return <Router>
        <ul>
            <li><Link to='/'>home</Link></li>
            <li><Link to='/about'>about</Link></li>
        </ul>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
    </Router>
    
}
export default App;

import { render } from '@testing-library/react';
import React from 'react'
import {BrowserRouter as Router,Redirect,Route,Link,Switch,NavLink} from 'react-router-dom';

const Home =()=>{
    return <div>Home</div>
}
const About =(props)=>{
    console.log(props.location.state);
    return <div>About</div>
}
const Content =(props)=>{
    console.log(props)
    return <div>{props.match.params.page}</div>
    
}
//路径小写 组件名字大写
const App = ()=>{
    return <Router>
        <ul>
            <li><NavLink exact activeStyle={{color:'red'}} to='/'>home</NavLink></li>
            <li><NavLink activeStyle={{color:'red'}} to={{
                pathname:'/about',
                state:{id:100}
                }}>
                About</NavLink></li>
            <><NavLink activeStyle={{color:'red'}} to='/news'>News</NavLink></>
            <li><NavLink activeStyle={{color:'red'}} to='/content/1'>Content01</NavLink></li>
            <li><NavLink activeStyle={{color:'red'}} to='/content/2'>Content02</NavLink></li>
        </ul>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/about"  component={About}>
            </Route>
            <Route path='/news' render={()=><div>News</div>}/>
            <Route path="/content/:page" component={Content}/>
        </Switch>
        
    </Router>
    
}
export default App;

<Route/>

• 匹配路径，挂载组件
  <Route exact path='/home' component={ Home }/>

• exact：严格匹配

• path：字符串类型，用来匹配url

• component：值是一个组件，在path匹配成功后挂载这个组件

• render：一个返回组件的方法

• children：一个返回组件的方法

<Switch>...</Switch>

• 只会挂载与<Route>路径匹配成功的第一个

• 子节点只能是<Route>或<Redirect/>

<Switch> 
	<Route exact path="/" component={ Home }/> 
	<Route path="/about" component={ About }/> 
	<Route path="/:user" component={ User }/> 
	<Route component={ NoMatch }/> 
</Switch>

<Link to = "...">...</Link>

to : string
<Link to="/home">Home</Link>

to : object
<Link to={ { 
	pathname: '/courses', 
	search: '?sort=name', 
	hash: '#the-hash',
	state:{id : 1}     
	//  传到组件的数据，通过 this.props.location.state 获取
 } } > Courses </Link>

<NavLink to ="...">...</NavLink>

• NavLink 是 Link 的子类

• activeClassName：string，被选中时添加的类名

• activeStyle：object，被选中时添加的行内样式

• exact：boolean，严格匹配

<Redirect to = "...">

• 当被挂载时，将路由重定向为to属性指定的地址

• <Route path="/home" render={( )=><Redirect to="/other“ />}/>

• from和exact两个属性只能用在<Switch>组件下的<Redirect/>

<Switch>
	<Redirect from = '/old‘  to = ‘/new‘ />
	<Route path='/new' component={ New }/>
</Switch>

---

动态路由

路由配置

<Route path='/content/:id' component={Content}/>
<Link to ={'/content/1'}>{item.title}</Link>

数据接收

match对象

• 一个包含<Route path=''>匹配路径参考信息的对象
• params
• url、path、isExact

路由get传值

路由配置

<Route path='/content' component={ Content }/>

<Link to={/content?id=1}>{item.title}</Link>

数据接收

数据存放在this.props.location.search

通过URL模块解析

• npm install url -save
• url.parse(urlStr:string.parseQueryStr:true)

---

组件化

UI组件：展示，通过属性props传递数据

智能组件：状态（state、setState）、生命周期（componentDidMount）

hooks：函数组件化