react-router-dom V6路由參數

一、標籤組件

  1.search方式

    <Link to={'/main/dataForm?id=123&name=aa'}>導航</Link>

    <Link to={{pathname: '/main/dataForm', search: `?id=123&name=aa`}}>導航</Link>

    <Link to={-1}>導航</Link>

  2.state方式

    <Link to={'/main/dataForm'} state={{id:123, name:'aa'}}>導航</Link>

  3.動態參數方式

    <Link to={'/main/dataForm/456'}>導航</Link>

二、js方式

  1.search方式

    navigate('/main/dataForm?id=123&name=aa');

    navigate({pathname: '/main/dataForm', search: `?id=123&name=aa`});

    navigate(-1);

  2.state方式

    navigate('/main/dataForm',{state: {id:123, name:'aa'}});

  3.動態參數方式

    navigate('/main/dataForm/456');

三、獲取參數方式

  1.search方式

    const [searchParams, setSearchParams] = useSearchParams();
      console.log(searchParams.get('id'));

  2.state方式

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

  3.動態參數方式

    const params = useParams();
            console.log(params.id);

四、注意事項

  1.import {Link, useNavigate, useSearchParams, useLocation, useParams,} from "react-router-dom";

  2.const navigate = useNavigate();

  3.state方式：HashRouter會丟失，BrowserRouter不會丟失

  4.動態參數方式：需配置路由<Route path="/main/dataForm/:id" element={<DataForm/>}></Route>