react路由怎么安装

react路由的安装方法:1、通过“npm i react-router-dom@5.0 -S”安装路由;2、使用“import { HashRouter as Router, Route, NavLink } from ‘react-router-dom’”方式导入路由即可。

react路由怎么安装

本教程操作环境:Windows10系统、react-router-dom5.0版、Dell G3电脑。

react路由怎么安装?

react 路由安装及简单使用

一.react安装路由

安装:npm i react-router-dom@5.0 -S (最新版本为6.0)

导入:

import { HashRouter as Router, Route, NavLink } from 'react-router-dom'

登录后复制

路由配置:

1.所有路由相关内容都应该放在组件内

2.链接使用:

3.页面使用:

 示例:简单的路由跳转

function App() {    return (        
              //exact 精确匹配            首页|            关于        
        {/* 路由页面 */}                                            )}export default App function Home() {    return 
首页页面
} function About() {    return 
         关于页面        
}

登录后复制

二.路由传参

路由传参形式

1.链接传参   

2.参数传参 

3.参数获取  props.match.params.id

 常用历史操作的方法

1.go()历史跳转记录

2.goBack(返回)

3.push()添加记录跳转

4.replace()替换记录并跳转

示例:

import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom'// NavLink 会比 link自动添加一个active的classfunction App() {    return (        
            首页|            关于            产品abc            产品123        
        {/* 路由页面 */}                                                        )}export default App function Produce({ match, history, location }) {    // console.log(match);    return (
        

产品{match.params.id}

                    
)} function Home() {    return 
首页页面
} function About() {    return 
关于页面    
}

登录后复制

子路由传参

示例:

// 导入路由相关组件// 导入哈希路由 别名router// Route路由页面// NvaLink 导航链接import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom'// NavLink 会比 link自动添加一个active的classfunction App() {    return (        
            首页|            关于            产品abc            产品123            管理        
        {/* 路由页面 */}                                                                    )}export default Appfunction NoMatch({ location, history }) {    return (
        

404

        

你爹来咯

        

{location.url}

                首页     
)}function Admin() {    return (
        
            概览
            列表        
        
                                            
    
)}function Dash() {    return (
        概览    
)}function OrderList() {    return (
        订单列表    
)}function Produce({ match, history, location }) {    // console.log(match);    return (
        

产品{match.params.id}

                    
)} function Home() {    return 
首页页面
} function About() {    return 
关于页面    
}

登录后复制

推荐学习:《react视频教程》

以上就是react路由怎么安装的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2922705.html

(0)
上一篇 2025年3月11日 18:40:46
下一篇 2025年3月7日 07:56:47

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论