react路由怎么安装

PHP中文网 • 2025年3月11日 18:40:49 • 编程技术 • 阅读 2

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

本教程操作环境：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 关于页面    
}