資訊專欄INFORMATION COLUMN
摘要：的值是一個函數，這個函數返回一個元素，這個函數返回一個元素。這種方式可以很方便的為待渲染的組件傳遞額外的屬性。與之前兩種方式不同的是，無論是否匹配成功，返回的組件都將會被渲染。使用保證只有當的為時，第一個才會被匹配。
React Router v4是對React Router的一次徹底重構，采用動態路由，遵循React中一切皆組件的思想，每一個Route(路由)都是一個普通的React組件。
BrowserRouter創建的URL形式如下：
http://react.com/some/path
HashRouter創建的URL形式如下：
http://react.com/#/some/path
使用BrowserRouter時，一般還需要對服務器進行配置，讓服務器能正確處理所有可能的URL.例如，當瀏覽器發送 http://react.com/some/path 和 http://react.com/some/path2兩...，服務器能夠返回正確的HTML頁面（也就是單頁面應用中唯一的html頁面).使用HashRouter則不存在這個問題，因為hash部分的內容會被服務器自動忽略，真正有效的是hash前面的部分，而對于單頁面應用來說，這部分內容是固定的。
路由的配置
1.path
(1)當使用BrowserRouter時，path用來描述這個Route匹配的URL的pathname
(2)當使用HashRouter時,path用來描述這個Route匹配的URL的hash.
2.match
(1)params: Route的path可以包含參數，例如：
(2)isExact: 是一個布爾值，當URL完全匹配時，值為true;當URL部分匹配時，值為false.例如：當path="/foo"，URL="http://react.com/foo"時，是完全匹配；當URL="http://react.com/foo/1時，是部分匹配。
(3)path: Route的path屬性，構建嵌套路由時會使用到。
(4)url: URL的匹配部分。
3.Route渲染組件的方式
(1)component
component的值是一個組件，當URL和Route匹配時，component屬性定義的組件就會被渲染。
當URL="http://react.com/foo"時，Foo組件會被渲染。
(2)render
render的值是一個函數，這個函數返回一個React元素，這個函數返回一個React元素。這種方式可以很方便的為待渲染的組件傳遞額外的屬性。
例如：
)}>
Foo組件接收了一個額外的data屬性。
(3)children children的值也是一個函數，函數返回要渲染的React元素。與之前兩種方式不同的是，無論是否匹配成功，children返回的組件都將會被渲染。但是當匹配不成功時，match屬性為null。例如：
)} />
如果Route匹配當前URL,待渲染元素的根節點div的class將被設置成active。
4.Switch和exact
當URL和多個Route匹配時，這些Route都會執行渲染操作。如果只想讓第一個匹配的Router渲染，那么可以把這些Route包到一個Switch組件中。
如果想讓URL和Route完全匹配時，Route才渲染，那么可以使用Route的exact屬性。Switch和exact常常聯合使用，用于應用首頁的導航。
例如：
如果不使用Switch，當URL的pathname為"/posts"時，
如果不使用exact,"/" "/posts" "/user1"等幾乎所有URL都會匹配第一個Route，又因為Switch的存在，后面的兩個Route永遠也不會被匹配。使用exact,保證只有當URL的pathname為"/"時，第一個Route才會被匹配。
5.嵌套路由
嵌套路由是指在Route渲染的組件內部定義新的Route.例如：
const Posts = ({match}) => {
return(
{/*這里match.url等于／posts*/}
}
當URL的pathname為"/posts/react"時，PostDetail組件會被渲染；當URL的pathname為"/posts"時，PostList組件會被渲染。Route的嵌套使用讓應用可以更加靈活的使用路由。
6.鏈接
Link是React Router提供的鏈接組件，一個Link組件定義了當點擊該Link時，頁面應該如何路由：
例如：
const Navigation = () => (
)
Link使用to屬性聲明要導航到URL地址。to可以是string或object類型，當to為object類型時，可以包含pathname、search、hash、state、四個屬性，例如：
pathname:"/posts",
search:"?sort=name",
hash:"#the-hash",
state:{formHome:true}
}}/>
除了使用Link外，我們還可以使用history對象手動實現導航，history中最常用的方法是push(path,[state])和replace(path,[state]),push會向瀏覽器歷史記錄中新增一條記錄，replace會用新紀錄替換當前紀錄，例如：
history.push("/posts")
history.replace("/posts")
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function BasicExample() {
return (
- Home
- About
- Topics
);
}
function Home() {
return (
Home
);
}
function About() {
return (
About
);
}
function Topics({ match }) {
return (
Topics
- Rendering with React
- Components
- Props v. State
Please select a topic.
} />
);
}
function Topic({ match }) {
return (
{match.params.topicId}
);
}
export default BasicExample;
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108983.html
摘要：通過聲明式編程模型定義組件，是最強大的核心功能。無論是的瀏覽器書簽，還是的導航功能，只要是可以使用的地方，就可以使用。二級路由使用渲染組件屬性狀態請選擇一個主題。也許是最佳小實踐地址，覺得有幫助的話，請點擊一下，嘿嘿 小前言 這是一個小小的有關react的小例子，希望通過一個小例子，可以讓新手更好的了解到react、react-router4.0、redux的集中使用方法。 這是基...
摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發給大家，同時發布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...
摘要：中的元素組件實例和節點，是中關系密切的個概念，也是很容易讓初學者迷惑的個概念。組件和元素關系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節點和子組件實例的引用。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 React 中的元素、組件、實...
摘要：中的元素組件實例和節點，是中關系密切的個概念，也是很容易讓初學者迷惑的個概念。組件和元素關系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節點和子組件實例的引用。 文：徐超，《React進階之路》作者授權發布，轉載請注明作者及出處 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解...
閱讀 1793·2023-04-25 15:51
閱讀 2502·2021-10-13 09:40
閱讀 2137·2021-09-23 11:22
閱讀 3247·2019-08-30 14:16
閱讀 2657·2019-08-26 13:35
閱讀 1853·2019-08-26 13:31
閱讀 880·2019-08-26 11:39
閱讀 2739·2019-08-26 10:33
