构建一个react项目 - 超详细 - 路由组件参数传递（react-router-dom v6）

向路由组件参数传递

方式一 - 传递params参数（地址栏显示）

步骤：

路由链接（携带参数） - <NavLink to='/home/tom/i8'>HOME</NavLink>
注册路由（声明接收）- 
    <Routes>
        <Route path='/home/:name/:age' element={<Home />}></Route>
    </Routes>
参数接收：
    import { useParams } from 'react-router-dom'
    const params = useParams();
    const {name, age} = params;

方式二 - 传递search参数（地址栏显示）

步骤：

路由链接（携带参数） - <NavLink to='/about?age=18&name=elio'>ABOUT</NavLink>
注册路由（无需声明，正常注册）- 
    <Routes>
        <Route path='/about' element={<About />}></Route>
    </Routes>
参数接收：
    import { useSearchParams } from 'react-router-dom'
    const [params, setParams] = useSearchParams(); // 必须这样声明
    const name = params.get('name');
    const age = params.get('age');

方式三 - 传递state参数（地址栏不显示）

步骤：

路由链接（携带参数） - <NavLink to={'/about'} state={{age:18, name:'elio'}}>ABOUT</NavLink>
注册路由（无需声明，正常注册）- 
    <Routes>
        <Route path='/about' element={<About />}></Route>
    </Routes>
参数接收：
    import { useLocation } from 'react-router-dom'
    const params = useLocation();
    const {age, name} = params.state