react路由的基本实现方式

reacy初体验，总结记录

• 官方文档 https://reacttraining.com/react-router/web/guides/philosophy
• https://reacttraining.com/react-router/core

  路由的实现方式@^4.3.1

• npm install react-router-dom
• BrowserRouter 路由方式(BrowserRouter需要后端配置点东西 重定向处理 否则会有404bug)/HashRouter 跳转地址带#号
• Route路由规则
• Switch路由选项 只有第一个符合的route被匹配
• Link/NavLink跳转导航 NavLink做了一些点击处理适合导航菜单
• Redirect自动跳转
• 容器组件

  export  default class App extends Component{
      render(){
          return (
              <div>
                  {/* index.js中的路由 */}
                  {this.props.children}
                  <Tab></Tab>
              </div>
          )
      }
  }

• 路由
• exact是精准匹配 比如/ /a都会匹配/没有exact话包含的都会匹配
• strict 精准匹配 配合exact使用

  import {
      BrowserRouter as Router,//容器
      //HashRouter as Router,//支持老浏览器并且再次点击有报错 不建议使用
      Route ,//一条路由
      Link,//<Link to=''>标签跳转路由相当于vue的<router-link to=''>
      Switch,//只显示一个路由 否则可以匹配显示多个
  } from 'react-router-dom';
  ReactDOM.render(
      <Router>
      <App>
          <Switch>
              <Route exact path="/"   component ={Home}/>
              <Route path="/lesson"  component ={Lesson} />
              <Route path="/profile"  component ={Profile} />
              <Route path="/detail"  component ={Detail} />
              <Route path="/login"  component ={Login} />
              <Route path="/reg"  component ={Reg} />
              {/* 匹配所有路径 */}
              <Route component ={NotFound}/>
          </Switch>
      </App>
  </Router>, document.getElementById('root'));

• 菜单

  import React,{Component} from 'react'
  import { NavLink } from 'react-router-dom'
  import './index.css'
  export  default class Tab extends Component{
      render(){
          return (
              <nav className="footer" >
                  <NavLink exact to={'/'} activeClassName="selected">
                      <i className="iconfont">&#xe610;</i>
                      <span>首页</span>
                  </NavLink>
                  <NavLink to={'/lesson'} activeClassName="selected">
                      <i className="iconfont">&#xe6be;</i>
                      <span>我的课程</span>
                  </NavLink>
                  <NavLink to={'/profile'} activeClassName="selected">
                      <i className="iconfont">&#xe602;</i>
                      <span>个人中心</span>
                  </NavLink>
              </nav>
          )
      }
  }

  路由传参 this.props.match.params

  //路由
  render(){
      return(
          <div>
              <Route path="/a:id" component ={a}>
              <Route path="/b" component ={b}>
          </div>
      )
  }

• 组件A

  export  default class A extends Component{
      render(){
          return (
              <div>
                  Component A
                  参数是{this.props.match.params.id}
                  <Switch>
                      <Router path={`${this.props.match.path}/:id`}
                  </Switch>
              /div>
          )
      }
  }

路由下的props属性

history 跳转路径的
locatio 路径相关并且其中 pathname:/user/detail/1"最重要 当前路径
match   匹配的结果 如果匹配上就是对象 匹配不上就是null

制作头部返回组件

• 因为i当前组件没有直接被路哟管理 所以会没有路由对象 需要用withRouter高级组件来实现

  import React,{Component} from 'react'
  import './index.css'
  import { withRouter } from 'react-router-dom'
  
   class MHeader extends Component{
    //只有通过路由渲染的页面才有this.props.history属性,路由渲染出来的子组件没有这个属性
      back = ()=>{
          this.props.history.goBack()
      }
      render(){
          return (
              <div className="m-header">
                  <i className="iconfont" onClick={this.back}>&#xe612;</i>
                  {this.props.title}
              </div>
          )
      }
  }
  //在当前组件上增加history属性
  export default withRouter(MHeader)

  单个按钮点击跳转页面功能

  import { Link } from 'react-router-dom'
  <Link to={'/reg'}  className="go_zc">前往注册</Link>

  点击当前路由进行认证 条件不满足跳到指定页面

• Route path=”/detail” component ={Detail}改为
• PrivateRoute path=”/detail” component ={Detail}

  //路由权限判断 没有登陆跳转到登陆页面
  import React,{Component} from 'react'
  import {Route,Redirect} from 'react-router-dom'
  import util from './util/util'
  
  export default class PrivateRoute extends Component{
      render(){
          let {component:Component,...rest} = this.props
          console.log(Component,rest);
          return (
              <Route {...rest} render={(props)=>(
                  util.get('user').username?<Component {...props}/>:
                   <Redirect to={'/login'}/>
              )}>
              </Route>
          )
      }
  }

  封装Link组件

• 用法 匹配路由即可

  import React from 'react';
  import {Route,Link} from 'react-router-dom';
  // children是重点 不管当前路径是否匹配上，都会渲染对应的组件
  export default function({to,text}){
      return (
          <Route path={to} children={({match})=>{
            return <li className={match?'active':''}><Link to={to}>{text}</Link></li>
        }} />
      )
  }

  react-Route的另一种渲染方法

• 他本身提供的一个render方法去逻辑判断渲染

  render(){
         let LayoutRouter = (
             <Layout>
                 <Switch>
                     <Route exact path="/" component={Home} />
                     <Route path="/product" component={ProductRouter} />
                     <Route path="/order/index" component={OrderList} />
                     <Route path="/user/index" component={UserList} />
                     <Route component={ErrorPage} />
                 </Switch>
             </Layout>
         )
         return(
             <Router>
                 <Switch>
                     <Route path="/login" component={Login} />
                     <Route path="/" render={props => LayoutRouter} />
                 </Switch>
             </Router>
         )
     }

  嵌套路由

• this.props.children是容器组件包裹的部分

  import React from 'react'
  import {HashRouter as Router,Route,LinK} from 'react-router-dom'
  import Main from './Main'
  import About from './../route1/about'
  import Topic from './../route1/topic'
  import Home from './Home'
  export default class Router extends React.Component{
      render(){
          return (
              <Router>
                  <Home>
                      <Route path="/main" render={()=>
                          <Main>
                              <Route path="/main/a" component={About}></Route>
                          </Main>
                      }></Route>
                  </Home>
              </Router>
          );
      }
  }

• Home

  import React from 'react'
  import { Link } from 'react-router-dom'
  export default class Home extends React.Component {
      render() {
          return (
              <div>
                  <ul>
                      <li>
                          <Link to="/main">Home1</Link>
                      </li>
                  </ul>
                  <hr />
                  {this.props.children}
              </div>
          );
      }
  }

• Main.js

  import React from 'react'
  import { Link } from 'react-router-dom'
  export default class Main extends React.Component {
      render() {
          return (
              <div>
                  this is main page.
                  <Link to="/main/a">嵌套路由</Link>
                  <hr/>
                  {this.props.children}
              </div>
          );
      }
  }

页面跳转 this.props.history.push

import React from 'react';
import {withRouter} from 'react-router-dom';
import { Button} from 'antd';
class Demo extends React.Component{
  handleClick(event){
    this.props.history.push("/register");
  }
  render(){
    return(
      <div>
         <Button onclick={this.handleClick}>click me!</Button>
     </div>
    );
  }
}
export default withRouter(Demo);

赏

谢谢你请我吃糖果

支付宝

微信