這篇文章主要介紹了react路由如何安裝的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇react路由如何安裝文章都會(huì)有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比嘉善網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式嘉善網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋嘉善地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

react路由的安裝方法：1、通過“npm i react-router-dom@5.0 -S”安裝路由；2、使用“import { HashRouter as Router, Route, NavLink } from 'react-router-dom'”方式導(dǎo)入路由即可。

react 路由安裝及簡單使用

一.react安裝路由

安裝：npm i react-router-dom@5.0 -S （最新版本為6.0）

導(dǎo)入：

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

路由配置：

1.所有路由相關(guān)內(nèi)容都應(yīng)該放在組件內(nèi)

2.鏈接使用：

3.頁面使用：

示例：簡單的路由跳轉(zhuǎn)

function App() {
    return (
        

              //exact 精確匹配
            首頁|
            關(guān)于
        
        {/* 路由頁面 */}
        
            
            
        
    )
}
export default App
 
function Home() {
    return 
首頁頁面
}
 
function About() {
    return 

         關(guān)于頁面    
    
}

二.路由傳參

路由傳參形式

1.鏈接傳參  

2.參數(shù)傳參  

3.參數(shù)獲取  props.match.params.id

常用歷史操作的方法

1.go()歷史跳轉(zhuǎn)記錄

2.goBack（返回）

3.push()添加記錄跳轉(zhuǎn)

4.replace（）替換記錄并跳轉(zhuǎn)

示例：

import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom'
// NavLink 會(huì)比 link自動(dòng)添加一個(gè)active的class
function App() {
    return (
        

            首頁|
            關(guān)于
            產(chǎn)品abc
            產(chǎn)品123
        
        {/* 路由頁面 */}
        
            
            
            
        
    )
}
export default App
 
function Produce({ match, history, location }) {
    // console.log(match);
    return (

        
產(chǎn)品{match.params.id}
         history.goBack()}>返回
         history.push('/')}>回到首頁
    
)
}
 
function Home() {
    return 
首頁頁面
}
 
function About() {
    return 
關(guān)于頁面
    
}

子路由傳參

示例：

// 導(dǎo)入路由相關(guān)組件
// 導(dǎo)入哈希路由 別名router
// Route路由頁面
// NvaLink 導(dǎo)航鏈接
import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom'
// NavLink 會(huì)比 link自動(dòng)添加一個(gè)active的class
function App() {
    return (
        

            首頁|
            關(guān)于
            產(chǎn)品abc
            產(chǎn)品123
            管理
        
        {/* 路由頁面 */}
        
            
            
            
            
        
    )
}
export default App
function NoMatch({ location, history }) {
    return (

        
404
        
你爹來咯
        
{location.url}
        后退
        首頁
 
    
)
}
function Admin() {
    return (
        
            概覽
            列表