Url Parameters

react-router之Url Parameters

1- 如何匹配路径参数：

该示例演示了动态路由是如何匹配的，以及如何获取匹配到的参数值。和很多框架匹配规则一致，都是:param.在获取参数的时候，可以用hooks形式 ，也可以用原始的props.match.params.xxx

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

// Params是URL中以冒号开头的占位符，如本例中路由中定义的 “：id” param。
// 类似的约定用于匹配其他流行web框架（如Rails和Express）中的动态段。

ReactDOM.render(
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

		// 多个Link组件对应一个组件——Child组件
        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>,
    document.getElementById('root')
)

function Child() {  
  // 我们可以使用这里的“useParams”钩子访问URL的动态片段
  console.log(useParams())  // {id: "netflix"} 点击哪个传进哪个
  let { id } = useParams();  // es6的对象解构赋值，相当于 let id = useParams().id
  return (
    <div>
      <h3>ID: {id}</h3>  
    </div>
  );
}

2- useParams：（具体可见Hooks）

useParams返回URL参数的键/值对的对象。使用它访问当前<Route>的match.params。

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";

function HomePage() {
  return <div>home</div>
}

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,
  document.getElementById('root')
);

3- react实现在url路径里获取页面需要的参数
（项目自己定义的）
  util.js文件：

export default {
	   /**
       * 获取URL中的参数
       */
   
      getUrlPam_util:()=>{
         var url = window.location.href;
         /* 
            indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
            如果要检索的字符串值没有出现，则该方法返回 -1。
         */
         if(url.indexOf("?")<0){ 
           return {};
         }
         var vars = url.split("?");
         var localPams = vars[1].split("&");
         var obj = {}
         for (var i=0;i<localPams.length;i++) {
               var index = localPams[i].indexOf("=");
               var pair0 = localPams[i].substr(0,index);
               var pair1 = localPams[i].substr(index+1);
               obj[pair0] = pair1;
         }
         return obj;
      }
}

使用方法：

1. 在文件jsx中引入：import util from ‘…/…/…/common/businessUtils/util’;
2. 获取：
   var param = util.getUrlPam_util();
   token = param[‘token’];
   kid = param[‘kid’];
3. 例如：http://page.html?token=7y/9Gsa8JpyyeK4m8GVk1R++We4=&kid=12
   运行过程：（以上链接为例）
   – console.log(index); // 返回5,3
   – console.log(pair0); // 返回token,kid
   – console.log(pair1); // 返回7y/9Gsa8JpyyeK4m8GVk1R++We4=,12
   – console.log(obj); // {token: “7y/9Gsa8JpyyeK4m8GVk1R++We4=”, kid: “12”}
4. 结果：token=7y/9Gsa8JpyyeK4m8GVk1R++We4=；kid=12；