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

读取url参数

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

function App() {
    return (
        
            {/* 编写路由导航 */}
            
                
                    学习
                
            
            {/* 路由配置 */}
            
                }>
                {/* 配置详情页，演示路由传参取参 */}
                }>
            
        
    )
}

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

function Classes() {
    return (
        
            
                
                    react
                
                
                    vue
                
            
        
    )
}

页面效果如下：

 

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

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