最新公告
  • 欢迎您光临起源地模板网，本站秉承服务宗旨 履行“站长”责任，销售只是起点 服务永无止境！立即加入钻石VIP
    • 10年
    专注帝国cms二次开发
    升级SVIP
    站长资源平台
    当前位置：站长学院 > 综合教程 > React路由的跳转和传参数

    React路由的跳转和传参数

    正文概述 掘金(HMGDCR598)   2021-02-22   516

    一： Link和NavLink的跳转方式

    Link和NavLink用法一样，不用之处在于NavLink有activeClassName属性，用于设置当前活动的tab标签的样式，以下是对NavLink的使用说明。

    1） index.js入口文件文件

    由于路由跳转(Link和NavList)和路由注册都需要 BrowserRouter包裹，所以为了能够全局使用路由，我们需要在入口写入用BrowserRouter包裹App组件。

    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
ReactDOM.render(
    <BrowserRouter>
         <App/>
    </BrowserRouter>
,document.getElementById('root'))

    2） App组件文件

    import React,{ Component } from "react";
import Main from "./components/Main";
import "./App.css";
export default class App extends Component {
    render(){
        return (
            <div className="app">
                <Main></Main>
            </div>
        )
    }
}

    3） Main组件文件

    import React,{ Component } from "react";
import NavList from "../NavList";
import Center from "../Center";
import "./index.css";
export default class Main extends Component {
    render() {
        return (
            <div className="main">
                <NavList ></NavList>
                <Center ></Center>
            </div>
        )
    }
}

    4） NavList组件文件

    在此项目中，我们是在此文件定义路由的跳转。我们使用的是NavLink 其中activeClassName="active"的active是我们自己定义的样式，即当前活动路由的tab样式。路由的路劲使用to="/home",其中/home就是我们要跳转的路由路劲。

    import React,{ Component } from "react";
import { NavLink } from "react-router-dom";

import "./index.css";
export default class NavList extends Component {
    render() {
        return (
            <div className="navList">
                <h1>NavList组件</h1>
                <div className="list-group">
                    <NavLink activeClassName="active" className="list-group-item " to="/home">Home</NavLink>
                    <NavLink activeClassName="active" className="list-group-item" to="/about">About</NavLink>
                </div>

            </div>
        )
    }
}

    5）Center组件文件

    上面我们已经写好了路由的跳转，但还需要注册路由表，该项目是在此文件写路由表的。路由表的注册使用的是Route 标签，路由使用的是path='/home',其中/home就是我们的路由路劲。component是我们路由跳转需要展示的组件。一般路由组件我们是写在pages目录下的。

    import React,{ Component } from "react";
import { Route } from "react-router-dom";
import Home from "../../pages/Home";
import About from "../../pages/About";
import "./index.css";
export default class Center extends Component {
    render() {
        return (
            <div className="center">
                <h1>Center组件</h1>
                <Route path='/home' component={Home}></Route>
                <Route path='/about' component={About}></Route>
            </div>
        )
    }
}

    注意：

    • 路由组件可以获取通过this.props获取路由相关信息，普通组件是不可以的。
    • 路由组件是需要赋给component属性，而不能直接写标签。
    • 路由组件一般我们都是写在pages目录下

    二：对NavLink的封装

    由于NavLink需要的一些属性都差不多，所以我们可以对它进行封装，没必要每次都需要些冗余的代码。

    由以下例子可知，NavLink需要的公共属性有activeClassName和className

    <NavLink activeClassName="active" className="list-group-item " to="/home">Home</NavLink>

    1）MyNavList组件文件

    对NavLink的封装后，代码如下：

    import React,{ Component } from "react";
import { NavLink } from "react-router-dom";

import "./index.css";
export default class MyNavList extends Component {
    render() {
        return (
            <NavLink activeClassName="active" className="list-group-item " {...this.props}/>      
        )
    }
}

    2）使用MyNavList组件

    import React,{ Component } from "react";
import MyNavLink from "../MyNavLink";

import "./index.css";
export default class NavList extends Component {
    render() {
        return (
            <div className="navList">
                <h1>NavList组件</h1>
                <div className="list-group">
                    {/* 路由跳转 */}
                    <MyNavLink to="/home">首页</MyNavLink>
                    <MyNavLink to="/about">关于</MyNavLink>
                </div>

            </div>
        )
    }
}

    三：Switch的使用

    在注册路由表的时候，使用Switch标签，当匹配到指定路由后，就不继续往下匹配，提高效率。

    import React,{ Component } from "react";
import { Route,Switch } from "react-router-dom";
import Home from "../../pages/Home";
import About from "../../pages/About";
import "./index.css";
export default class Center extends Component {
    render() {
        return (
            <div className="center">
                <h1>Center组件</h1>
                {/* 注册路由，使用Switch标签，当匹配到指定路由后，就不继续往下匹配，提高效率 */}
                <Switch>
                    <Route path='/home' component={Home}></Route>
                    <Route path='/about' component={About}></Route>
                </Switch>
                
            </div>
        )
    }
}

    四：开启模糊模式（默认）和启精准匹配（严格匹配）

    默认是模糊匹配 exact=false。

    模糊匹配：输入的路由必须包含注册路由的路劲，输入的可以比注册的多，但路劲的顺序必须一样 。比如：注册路由是/home，但我输入的路劲是/home/a在模糊匹配下，页面正常显示，而/b/home/a则不能正常显示。

    <Switch>
   <Route path='/home' component={Home}></Route> // 模糊模式
   <Route exact path='/about' component={About}></Route> // 严格模式
</Switch>

    注意：

    • 一般我们不使用严格模式，而采用的是模糊匹配。在开启严格模式下，不能创建子路由（路由嵌套）

    五：路由重定向

    Redirect一般放在路由表的最下方。当我们输错或者开启默认打开的是路由/home

    <Switch>
  <Route path='/home' component={Home}></Route>
  <Route exact path='/about' component={About}></Route>
  <Redirect to="/home" />
</Switch>

    六：子路由

    用法一样，不同之处在于子路由表必须包含父路由表。本例子父路由表是/home,那么子路由表是/home/news和/home/news

    import React,{ Component } from "react";
import MyNavLink from "../../components/MyNavLink";
import { Route,Redirect } from "react-router-dom";

import News from "./News";
import Message from "./Message";
import "./index.css"
export  default class Home extends Component {
  render() {
      return (
          <div>
              Home.....
              <div>
                  <ul className="tab-group">
                      <li className="tab-group-item">
                          <MyNavLink to="/home/news">新闻</MyNavLink>
                      </li>
                      <li className="tab-group-item">
                          <MyNavLink to="/home/message">消息</MyNavLink>
                      </li>
                  </ul>
                  {/* 这里是注册子路由表 */}
                  <Route path="/home/news" component={News}/>
                  <Route path="/home/message" component={Message}/>
                  <Redirect to="/home/news"/>
              </div>
          </div>
      )
  }
}

    七：路由传递参数

    1） 路由跳转文件

    import React,{ Component } from "react";
import {Link } from "react-router-dom";
export  default class MessageTab extends Component {
  state = {
      tabList: [
          {
              title: "美国最新消息",
              id: '1'
          },
          {
              title: "中印外交最新消息",
              id: '2'
          },
          {
              title: "最新疫情消息",
              id: '3'
          }
      ]
  }
  render() {
      let {tabList} = this.state
      return (
          <ul>
              {
                  tabList.map(tabItem => {
                      return (
                          <li key={tabItem.id}>
                              {/* 跳转路由，并向路由组件传递params参数 */}
                              {/* <Link to={`/home/message/tab/${tabItem.id}`}>{tabItem.title}</Link> */}

                              {/* 跳转路由，并向路由组件传递search参数 */}
                              {/* <Link to={`/home/message/tab/?id=${tabItem.id}`}>{tabItem.title}</Link> */}


                               {/* 跳转路由，并向路由组件传递state参数 */}
                               <Link to={{pathname:`/home/message/tab`,state:{id:tabItem.id}}}>{tabItem.title}</Link>
                          </li>
                      )
                  })
              }
          </ul>
      )
  }
}

    2）路由表的注册

    
import React,{ Component } from "react";
import {Route } from "react-router-dom";
import MessageTab from "./MessageTab";
import MessageDetail from "./MessageDetail";
import "./index.css"
export  default class Message extends Component {
  render() {
      return (
          <div>
              <MessageTab/>
              {/* 注册路由，声明接收params参数 */}
              {/* <Route path="/home/message/tab/:id" component={MessageDetail}/> */}

              {/* 注册路由，声明接收search参数 */}
              {/* <Route path="/home/message/tab" component={MessageDetail}/> */}

              {/* 注册路由，声明接收state参数 */}
              <Route path="/home/message/tab" component={MessageDetail}/>
          </div>
      )
  }
}

    3）路由组件接收参数

    import React,{ Component } from "react";
import qs from "querystring";
export  default class MessageDetail extends Component {
  render() {
      /* 接收 params参数 */
      //   let {match:{params:{id}}} =  this.props

      /* 接收search参数 */
      // let {id} = qs.parse(this.props.location.search.substring(1))

      /* 接收state参数 */
      console.log(this.props)
      let {location:{state:{id}}} = this.props
      return (
         <div>
             消息详情{id}
         </div>
      )
  }
}

    起源地下载网 » React路由的跳转和传参数

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用？
    本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了？
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
    找不到素材资源介绍文章里的示例图片？
    对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发？
    请QQ联系我们
    掘金(HMGDCR598)

    掘金(HMGDCR598) SVIP

    分享到：

    相关推荐

    发表评论

    还没有评论，快来抢沙发吧！

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元