【报资讯】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路由怎么安装的详细内容，更多请关注php中文网其它相关文章！

关键词：自动添加相关文章