React学习笔记（八）—— React-router

1. 运行安装：npm i react-router-dom -S安装react-router-dom，react-router-dom中包含react-router中的核心技术
2. 在index.js项目入口文件中使用

// 引入HashRouter组件或者BrowserRouter组件，HashRouter组件生成的地址带#，BrowserRouter组件生成的地址不带#，Router是HashRouter或者BrowserRouter的别名
import {HashRouter as Router} from 'react-router-dom'
// 用Router组件包裹App组件
ReactDOM.render(<Router><App></App></Router>, document.getElementById('root'));

3. 在App.js组件中使用

// 引入Route组件，Redirect组件
import {Route,Redirect} from 'react-router-dom';
class App extends React.Component {
  render(){
     return <>
      <Route component={Center} path='/center'></Route> // ‘/center’进入Center组件
      < Redirect to = "/center" from='/'> </Redirect>  // 路由重定向
    </>
  } 
} 

4. 路由连接

import {Route,NavLink as Link} from 'react-router-dom';
export default class center extends Component {
    render() {
        return (  
            <div>
                <ul>
                    <li> <Link to='/center/bloglist'>bloglist</Link> </li>    // 点击进入bloglist组件， <Route component={Bloglist} path='/center/bloglist'></Route>写在那个组件里，就在那个组件的这个‘<Route component={Bloglist} path='/center/bloglist'></Route>’区域显示，也就是会进入那个组件
                    <li><Link to='/center/user'>user</Link></li>  // 点击进入user组件
                    <li><Link to='/center/user/mine'>mine</Link></li>  // 点击进入user组件下的mine组件
                </ul>
                <Route component={Bloglist} path='/center/bloglist'></Route>
                <Route component={User} path='/center/user'  exact></Route>  // 必须添加exact属性，否则点击mine组件连接，user组件和mine组件都会展示出来
                <Route component={Mine} path='/center/user/mine'></Route>
            </div>
        )
    }    
}

5. 404错误页面设置

// 1.引入react-router-dom中提供的Switch组件
import {Route,Redirect,Switch} from 'react-router-dom';
class App extends React.Component {
  render(){
    console.log(this.props)
     return <>
      // 2.Switch组件包裹所有路由组
      <Switch>
	      <Route component={Center} path='/center'></Route>
	      // 3.设置404页面路由
	      <Route component={Notfind} path='/404'></Route>
	      // 4.为正确的路由重定向添加exact属性，表示精确匹配路由，否则无法进入404页面
	      < Redirect to = "/center" from='/'  exact> </Redirect>
	      // 5.未找到上述路由时重定向到404页面
	      <Redirect to='/404'></Redirect>
      </Switch>
    </>
  }  
} 

6. Route组件中的常用api

• component，语法：component={组件名称} 优先级高，与render一样，只是不能传递参数
• render，语法：render={()=>{return <组件名称 />}。可以传递参数到组件内，语法：render={(props)=>{return <组件名称 {..props} x='1' />}，组件内就可以通过this.props.xxx获得x的值

7. Link组件中的常用api

• to，语法：to='路由地址'，传递参数（显示传参）语法to='路由地址?n=1'，传递参数（隐式传参）语法

to={{
		pathname:'路由地址',
		state:{  // 要传递参数
			n:1
		}
}}

8. 获取路由的相关信息(实现函数跳转等功能所需)，使用react-router-dom提供的withRouter高阶组件

// 方式一：
// 导入withRouter组件
import {withRouter} from 'react-router-dom';
// 在Frame组件就可以通过this.props.xxx获取相关信息及功能函数了
export default withRouter(Frame)

方式二：
// 导入withRouter组件
import {withRouter} from 'react-router-dom';
// 在Frame组件就可以通过this.props.xxx获取相关路由信息及功能函数了
@withRouter
class Frame extends Component{
	render(){
		return (
			
		)
	}
}
export default Frame