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>
);
}