react router dom巢狀路由

2022-04-14 00:46:22 字數 946 閱讀 7855

路由配置

import react from 'react';

import reactdom from 'react-dom';

//import './utils/common.scss';

} />

)

在入口檔案中進行路由的配置其中browserrouter是非hash路由的模式url後面不會帶有#,route是對應每個路由元件主要有exact、path、component、render這幾個屬性,其中巢狀路由主要用到的屬性是render屬性。將對應巢狀路由寫到render屬性中,最外邊用父路由包裹住。

注意!!!render的箭頭函式是沒有{}的

巢狀路由的頁面

import react,  from 'react'import './detail.scss'import  from 'react-router-dom'class detail extends component 

) }

}export

default withrouter(detail)

在要進行巢狀路由的頁面要在需要巢狀的地方加上這樣巢狀的路由就會在顯示在這裡了。

注意export default withrouter(detail)一定要用withrouter繫結到元件上不然元件上是沒有this.props.children.history這個方法的這樣就不能通過js的方法this.props.children.history(pathname : '/detail')跳轉

結果

react router dom 巢狀路由

入口檔案index.js import react from react import reactdom from react dom import babel polyfill if root null 各個檔案的詳細位置 import react,from react import from r...

react router dom路由模組化

1 先看一下未模組化的路由配置,有哪些地方是可以提出去的 import react from react import css index.css import from react router dom 這一塊是可以單獨提出去的 start import entrypage from compon...

react router dom路由的基本使用

在react中啟用路由模組,首先要裝包 npm i react router dom s,裝完之後在根元件中匯入 import from react router dom import react from react import from react router dom import home...