React Router：Navigate重定向和useParams 和 useSearchParams详解

Navigate

<Navigate>组件是React Router 6 中删除的<Redirect>组件的替代品。它是useNavigate钩子的包装器，可以在渲染时更改当前位置。要通过<Navigate>组件检索传递的数据，我们可以使用useLocation钩子，如下所示：

import { useLocation } from 'react-router-dom';

/*...*/

const location = useLocation();
const data = location.state;
console.log(data);

为了更好的了解，我们举一个详细的例子： 通过单击按钮或选中HomePage上的复选框，可以将用户从HomePage重定向到LoginPage。我们还传递一些数据并将其显示在LoginPage上，包括文本消息等。

import {Link, Navigate, Route, Routes, useLocation} from "react-router-dom";
import {Button, Checkbox} from "antd";
import {useState} from "react";

function App() {

  return (
    <div style={{  height: 'calc(100vh - 40px)', padding: '20px' }}>

        <Routes>
            <Route path="/" element={<HomePage />}>Home</Route>
            <Route path="/login" element={<LoginPage />}>Login</Route>
        </Routes>
    </div>
  )
}

const HomePage = () =>{
    //默认值是不重定向跳转的
    const [redirect, setRedirect] = useState(false)
    return redirect
        ? <Navigate
            to="/login"
            replace={true}
            state={{message:'你好'}}
        ></Navigate>
        : <div>
            <h1>home页面</h1>
            <div>
                <Button
                    onClick={()=>setRedirect(true)}>
                    跳转到login页面
                </Button>
            </div>
            <div>
                <Checkbox onChange={()=>{
                    setRedirect(true);
                }}> 跳转到login页面吗？</Checkbox>
            </div>
        </div>
}

const LoginPage = () => {
    const location = useLocation();
    const state = location.state;

    return <div>
        <h1>Login页面</h1>
        <p><Link to="/">跳转到Home</Link></p>

        {/* 打印携带数据*/}
        {state.message &&  <div>
            <h3>{state.message}</h3>
        </div>}
    </div>
}


export default App

useParams

useParams钩子用于从当前 URL 中读取<Route path>匹配的动态参数。例如，有以下这样的路径：

/some-path/:name/:id

然后 useParams 钩子将返回一个带有键/值对的对象，如下所示：

{
   name: <some value>,
   id: <some value>
}

具体来举个例子： 有homePage和postPage页面。postPage页面的路径如下所示：

/post/:id/:slug

import {Link, Route, Routes, useParams} from "react-router-dom";

function App() {
  return (
    <div style={{  height: 'calc(100vh - 40px)', padding: '20px' }}>
        <Routes>
            <Route path="/" element={<HomePage />}>Home</Route>
            <Route path='/post/:id/:slug' element={<PostPage />} />
        </Routes>
    </div>
  )
}

const HomePage = () =>{
    return <div>
        <p><Link to={`/post/2/hello-world`}>Hello World</Link></p>
        <p><Link to={`/post/5/other-page`}>Other Page</Link></p>
    </div>
}

const PostPage = () => {
   const params = useParams()
    return <div>
        <h1>ID:{params.id}</h1>
        <h2>Slug:{params.slug}</h2>
    </div>
}

export default App

useSearchParams

useSearchParams用于读取和修改当前位置的 URL 中的查询字符串。与React的useState钩子类似，React Router的useSearchParams钩子返回一个包含两个元素的数组：第一个是当前位置的搜索参数，后者是一个可用于更新它们的函数：

import { useSearchParams } from 'react-router-dom';

const App = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   return /* ... */
}

我们也来具体来举个例子：

import {Route, Routes, useSearchParams} from "react-router-dom";
import {Input} from "antd";

function App() {
  return (
    <div style={{  height: 'calc(100vh - 40px)', padding: '20px' }}>
        <Routes>
            <Route path="/" element={<HomePage />}>Home</Route>
        </Routes>
    </div>
  )
}

const HomePage = () =>{
    const [searchParams, setSearchParams] = useSearchParams();
    const searchHandler = (event) => {
        let search;
        if (event.target.value) {
            search = {
                keyword: event.target.value
            }
        } else {
            search = undefined;
        }
        setSearchParams(search, { replace: true });
    }
    return <div>
       <Input
           value={searchParams.keyword}
           onChange={searchHandler}
           placeholder="输入参数关键词"
           style={{ width: '300px', padding: '8px 15px', fontSize: '16px' }}
       ></Input>
    </div>
}

export default App