react路由怎么安装

藏色散人

发布时间：2023-01-03 14:12:49

1822人浏览过

来源于php中文网

原创

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.链接传参

易优压双驱挖掘机压路机器类网站源码1.7.3

易优压双驱挖掘机压路机器类网站源码是基于易优cms开发，适合企业进行机器类展示使用。程序内核为Thinkphp5.0开发，后台简洁，为企业网站而生。这是一套安装就能建站的程序，不定期更新程序BUG，更新网站功能。我们提供的不仅是模板这么简单，我们还提供程序相关咨询、协助安装等服务。默认不包含小程序插件，需要另外单独购买插件。模板安装步骤 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的class
function 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的class
function App() {
    return (
        
            首页|
            关于
            产品abc
            产品123
            管理
        
        {/* 路由页面 */}
        
            
            
            
            
        
    )
}
export default App
function 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 关于页面
    
}