【React】简单学习React Router的传参取参

读取url参数

:style在路由路径中使用语法并useParams()读取参数

function App() {
    return (
        <div>
            {/* 编写路由导航 */}
            <ul>
                <li>
                    <Link to="/classes">学习</Link>
                </li>
            </ul>
            {/* 路由配置 */}
            <Routes>
                <Route path="/classes" element={<Classes/>}></Route>
                {/* 配置详情页，演示路由传参取参 */}
                <Route path="/detail/:course" element={<Detail/>}></Route>
            </Routes>
        </div>
    )
}

function Detail() {
    let params = useParams();
    return (
        <div>
            我是{params.course}课程详情页
        </div>
    )
}

function Classes() {
    return (
        <div>
            <ul>
                <li>
                    <Link to="/detail/react">react</Link>
                </li>
                <li>
                    <Link to="/detail/vue">vue</Link>
                </li>
            </ul>
        </div>
    )
}

页面效果如下：

 

 注意！路径段:course和参数的键params.course匹配。

但是我我使用的useLocation()方法，通过console.log打印一下，可以看到返回以下信息