React路由

React路由

1. 安装依赖包
   1. react-router 和 react-router-dom
2. src目录下的index.js文件内:
   • 引入import { BrowserRouter as Router } from 'react-router-dom'
   • 将组件包裹:

      ReactDOM.render(
        <Router>
          <App />
        </Router>
      , document.getElementById('root'));
     

3. src目录下的App.js文件内:
   • 引入Route:import {Route,Redirect,Switch} from 'react-router-dom'
4. 一级路由写法:
   • App.js文件内:

     <Swich>
     //页面刷新重定向到home,需用Swich包裹,添加exact
       <Redirect from="/" to="/home" exact></Redirect>
   
     //创建Home组件并引入
       <Route path="/home" component={Home}></Route>
   
       ......//此处省略更多路由
   
     //匹配错误信息,路由输入出错,跳转至Error组件
       <Route component={Error}></Route>
     </Swich>
     <Foot></Foot>
   

   • Foot.js文件内:

     import React, { Component ,Fragment } from 'react'
     import {NavLink} from 'react-router-dom'//引入NavLink,路由添加类
   
     const Item=(props)=>{
       return <li>
         <NavLink activeClassName="active" to={props.href}>{props.name}</NavLink>
       </li>
     }
     export default class Foot extends Component {
   
       constructor(){
         super()
         this.state={
           list:[
             {
               id:1,
               name:'首页',
               href:'/home'
             },{
               id:2,
               name:'分类',
               href:'/classify/01'
               //点击分类,定位到二级路由第一项
             },{
               id:3,
               name:'我的',
               href:'/mine'
             },{
               id:4,
               name:'关于',
               href:'/about'
             }
           ]
         }
       }
   
       renderItem(){
         return this.state.list.map((item)=>{
           return <Item {...item} key={item.id}></Item>
         })
       }
   
       render() {
         return (
           <Fragment>
             <footer>
               <ul>
                 {this.renderItem()}
               </ul>
             </footer>
           </Fragment>
         )
       }
     }
   
   

5. 二级路由

    import React, { Component ,Fragment } from 'react'
    import {Route ,Link} from 'react-router-dom'
   
    const Item=(props)=>{
      return <li><Link to={props.href}>{props.name}</Link></li>
    }
   
    const Router_t=(props)=>{
      return <Route path={props.href} render={()=>{return <div>{props.name}</div>}}></Route>
    }
    export default class Classify extends Component {
   
      constructor(){
        super()
        this.state={
          list:[
            {
              id:1,
              name:'分类1',
              href:'/classify/01'
            },{
              id:2,
              name:'分类2',
              href:'/classify/02'
            },{
              id:3,
              name:'分类3',
              href:'/classify/03'
            }
          ]
        }
      }
   
   
      renderItem(){
        return this.state.list.map((item)=>{
          return <Item {...item} key={item.id}></Item>
        })
      }
   
      render_Router(){
        return this.state.list.map((item)=>{
          return <Router_t {...item} key={item.id}></Router_t>
        })
      }
   
      render() {
        return (
          <Fragment>
            <div className="classify">
              <ul>
                  {this.renderItem()}
              </ul>
              {this.render_Router()}
            </div>
          </Fragment>
        )
      }
    }
   
   

6. 路由传参
   • App.js文件内:

   //传入一个动态路由/:id
    <Route path = "/shopcar/:id" component ={ Shopcar } />   
   

   • 路由点击区

   //to属性增加pathname和search
    to = {{pathname: '/shopcar/001',search: '?a=1&b=2',}}
   

   • Shopcar.js文件内:

    import React,{ Component,Fragment } from 'react'
   
    const qs = require('querystring')//对?a=1&b=2进行处理
   
    class ShopCar extends Component{
      render () {
        let { search } = this.props.location // ?a=1&b=2'
        const { a, b } = qs.parse( search.slice(1) )
        return (
          <Fragment>
            <div className = "shopcar-box">
              ShopCar
              <p> params.id: { this.props.match.params.id } </p>
              <p> search.a : { a } </p>
              <p> search.b : { b } </p>
              <p> state: { this.props.location.state.money }</p>
            </div>
          </Fragment>
        )
      }
    }
    export default  ShopCar