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>