react router dom路由的基本使用

2021-10-06 01:20:07 字數 962 閱讀 3147

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

import react from

"react"

import

from

"react-router-dom"

import home from

"@/components/home"

;import movie from

"@/components/movie"

;import about from

"@/components/about"

;class

extends

react.component

}render()

>

<

/route>

"/movie" component=

>

<

/route>

"/about" component=

>

<

/route>

<

/div>

<

/hashrouter>}}

export

執行結果如下:

可以看到位址列已成功啟動了路由功能,且三個子元件能夠通過鏈結正確的路由。

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巢狀路由

路由配置 import react from react import reactdom from react dom import utils common.scss 在入口檔案中進行路由的配置其中browserrouter是非hash路由的模式url後面不會帶有 route是對應每個路由元件主要...

react router dom路由模組化

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