React入门学习笔记（7）react router 中的参数获取

BrowerRouter

要使用react router，要在最外层包裹一层Router, react-router-dom中的router有很多种，具体的可以去看官方文档，最常用的是BrowerRouter。

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(

// BrowerRouter
  <BrowserRouter>
	<App />
  </BrowserRouter>
  );

Query参数获取

使用hooks useSearchParams，示例如下

import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();
	//获取参数从	searchParams 对象的get方法中用对应key值，如果存在返回一个字符串，不存在则返回null
	//设置参数 用setSearchParams函数，参数为object
	
  const butClick =()=>{
	setSearchParams({text:"hello"})
  }

  return (
    <div>
      <p> text is {searchParams.get("text")}</p>
      <button onClick={}>hello</ button>
    </div>
  );
}

Param参数获取

使用hooks useParams，示例如下

import * as React from 'react';
import {useParams } from 'react-router-dom';



function App() {
// 方法1，直接申明对应(同名)变量，推荐
const { userId } = useParams();
// 方法二，建立params变量，然后再取对应成员
const param = useParams();
const userId1  = param.userId;

  return (
	<div>
	<p>方法1:{userId}</p>
	<p>方法2:{userId1}</p>
	</ div>
  );
}