React路由 初步

2021-08-04 22:26:15 字數 1315 閱讀 1599

示例文件：

1、安裝

npm install react-router react-router-dom


#做web開發 只需安裝這2個
2、完成路由小案列，我們要實現乙個簡單的tab切換頁面，切換顯示不同的內容(屬於不同的元件)

home元件home.js：

import react from 'react';


export default


class


home


extends


react.component


}
about元件about.js：

import react from 'react';


export default


class


about


extends


react.component


}
help元件help.js：

import react from 'react';


export default


class


help


extends


react.component


}
這3個元件都是整個tab的子元件，接下來我們需要完成包含這3個子元件的外層元件(也就是實現tab切換的元件)。

router-demo.js：

import react from 'react';


// 引入路由


import  from 'react-router-dom';


//引入元件


import home from "./home";


import about from "./about"


import help from  "./help"


export default


class


routerdemo


extends


react.component/>


"/about" component=/>


"/help" component=/>}}
這個元件裡，實現了react路由**邏輯。

3、我們在頁面檢視

react 動態修改路由 React 動態路由

封裝乙個高階元件，用來實現將普通的元件轉換成動態元件import react from react const asynccomponent loadcomponent class asynccomponent extends react.component catch err this.state...

react學習六 react路由

react router 安裝包yarn add react router dom匯入路由模組 import reactdom from react dom route 表示乙個路由規則，在 route 上，有兩個比較重要的屬性，path component link 表示乙個路由的鏈結 就好比 v...

react 動態修改路由 React中的路由設定

在本文中，我們來看看如何在react中設定路徑路由。我們期望在結尾時取得如下的成績 在本次演示中，我們建立了三個頁面 page 1，page 2，page 3。為了簡化處理，三個頁面的定義類似如下 import react from react function page1 from react r...