React 路由传值的三种方法

目录

前言

一、hash/search 传值

hash方式：

search方式：

二、动态路由传值

三、state传值

---

前言

在我们做项目的话总会遇到传值的过程，在当前页给另一个页面传一些值过去然后进行操作该数据的一个东西，在这里我们讲解一下在react中路由的三种传值方式。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、hash/search 传值

hash 和 search 他们二者最大的区别在于: hash 路径后以 # 开头，search 路径后以 ? 开头

hash方式：

hash传值第一种 在NavLink里面直接操作

{/* hash方法传值==>在路径里面直接操作 */}

<NavLink to='/list#a:1&b:2'> hash 方法</NavLink>

{/* /list==>目标路径 在目标路径后面紧跟着写 #  a:1&b:2&c:3==>需要传的值 */}

hash传值第二种 JS操作的语法

// hash方法传值==>JS操作

function Home(props) {
   const byValue_list = () => {
       props.history.push(
           {
               pathname:'/list', // 目标路径
               hash:`a:1&b:2`    // 需要传的值
           }
       )
   }
    return (
        <div>
            <button onClick={byValue_list}>hash方法</button>
            {/* 给Btn一个点击事件 */}
        </div>
    )
}

hash取值

console.log(props.location.hash);  //#a:1&b:2

search方式：

search传值 在NavLink里面直接操作

{/* search方法传值==>在路径里面直接操作 */}

<NavLink to='/list?a:1&b:2'> search方法</NavLink>

{/* /list==>目标路径 在目标路径后面紧跟着写 #  a:1&b:2&c:3==>需要传的值 */}

search传值 JS操作的语法

// search方法传值==>JS操作

function Home(props) {
   const byValue_list = () => {
       props.history.push(
           {
               pathname:'/list', // 目标路径
               search:`a:1&b:2`    // 需要传的值
           }
       )
   }
    return (
        <div>
            <button onClick={byValue_list}>search方法</button>
            {/* 给Btn一个点击事件 */}
        </div>
    )
}

search取值

console.log(props.location.search);  //#a:1&b:2

---

二、动态路由传值

动态路由是为了匹配较少数据时使用的

动态路由传值 在Link里面直接操作

{/* 动态路由传值==>在路径里面直接操作 */}

<Link to={`/list/${1}`}>动态路由</Link>

{/* /list==>目标路径  1==>需要传的值 */}

在配置路由App.js 里面在该目标路由后面动态添加一个key例如 
<Route path='/list/:id' component={List} />

动态路由传值 JS操作

function Home(props) {
     // 动态路由传值 Js
    const byValue_list = ()=>{
        props.history.push(`/list/${1}`)
    }
    return (
        <div>

           {/* <Link to={`/list/${1}`}>动态路由</Link> */}

           <button onClick={byValue_list}>动态路由</button>

        </div>
    )
}

动态路由取值

console.log(props.match.params);  // {id: '1'}

---

三、state传值

在HashRouter 中使用，可以传递任何类型的数据，但是刷新就会清空数据

在BrowerRouter 中使用，刷新不会清空数据，但是传递的数据类型会有所限制

(在这里我们例举一个我们常用的HashRouter方式)

state传值 在Link里面直接操作

{/* pathname==>目标路径  state==>需要传的数据 */}
<Link to={{pathname:'/list',state:{a:1,b:2}}}>state传值</Link>

state传值 JS操作

function Home(props) {
   const byValue_list = () => {
        props.history.push(
            {
                pathname:'/list', // 目标路径
                state:{a:1,b:2}   // 需要传的数据
            }
        )
   }
    return (
        <div>
           <button onClick={byValue_list}>state传值</button>
        </div>
    )
}

state取值

console.log(props.location.state);  // {a: 1, b: 2}

---