路由的跳轉：
路由跳轉方式：
路由帶參數寫法：
路由：
<Route path='/detail/:id' component={Detail}/>
1）js跳轉
this.props.history.push('/detail/' + value);
calss main extent component {
return{
<div><Link to="/home ">home</Link></div>
<div>{this.props.children}</div>//子路由顯示的地方
}
}
...
<Router history={hashHistory}>//定義跳轉方式#
<Route path="/" component={main}>
<Route path="home" commmponent={home}></Route>
</Route>
</Router>.docuemnt.elementId("app")
====================react路由========================
【授權路由：】
<Redirect>組件
它會始終執行瀏覽器重定向，當處於<switch>中時，只有其他路由不匹配的情況下，纔會渲染重定向組件；
v4使用<switch>來進行路由排他
【包容性路由：】
例：
<header>
<Route path="/user" component={usertop}/>
<Route path="/user" component={userbottom}/>
<Route path="/user/list" component={userlist}/>
</header>
V3路由有排他性，即一次只能渲染一條，而V4中上面的會將匹配的路由的組件都渲染，例上面，匹配路由 /user 時， usertop userbottom 與 userlist 會同時渲染；
【路由的戰略性佈局（即使用排他路由策略）】
例：
<header>
<switch>
<Route path="/" exact component={home}/>
<Route path="/user" component={usertop}/>
<Route path="/user/list" component={userlist}/>
<Redirect to="/" />
</switch>
</header>
這樣的即使沒有home沒有exact，它也會被渲染因爲Redirect;
路由/user 時，匹配如下：
匹配了/user，不匹配/user/list
所以，當需要同時匹配/user/list的話，可將/user/list寫於 /user前面，
<header>
<switch>
<Route path="/" exact component={home}/>
<Route path="/user" component={usertop}/>
<Route path="/user/list" component={userlist}/>
<Redirect to="/" />
</switch>
</header>
【默認路由:】
V3的<IndexRoute> ----> V4的<Route exact>;
【未找到：】
<switch>
<Route path="/" exact component={home}/>
<Redirect to="/" />
</switch>
【路由的動態匹配：】
<header>
<switch>
<Route path="/" exact component={home}/>
<Route path="/users" component={usertop}/>
<Route path="/user/:userId" component={userTop}/>
<Redirect to="/" />
</switch>
</header>
結果：/user/12 與/user/add都能匹配，渲染userTop,但實際上，需求是隻有/user/12詳情的時候才渲染，因此就需要“正則路由”：必須是數字
<Route path="/user/:userId(\\dt)" component={userTop}/>
【V3到V4路由寫法的改變：】
路由不適用Route嵌套，而是寫在組件component下，以前路由嵌套時，除了寫路由，還要寫路由渲染的地方，即<this.props.children>,
這樣，路由就會在此渲染，V4改變，匹配路由的組件想在哪渲染，路由就寫在哪，即<this.props.children>的位置；
相當於vue抽象路由view的是this.props.children
路由帶參數的使用：
<Route path="home/:id" component={home}>
問題：
當不帶參數的時候會報錯
解決方式：
<Route path="home(/:id)" component={home}>
vue是使用？
path="home/:id？"
子路由怎麼獲取到路由帶過來的參數：
class home ...{
return (
<div>home</div>
<div>{this.props.params.id}</div>
)
}
問題。router報錯的情況，history尤其，可以使用react-router使用3.0.2版本；
怎麼看元素是否被重新渲染：
在console子啊有一個console中的rendeing；
把Paint Flashing勾選上，當渲染的時候會有標記；
子路由跳轉的渲染機制：
這裏的子路由的跳轉，每次都會加載子組件以及父組件重新加載，然後移除(刪除，在生命週期的右邊)其他的路由；
爲什麼父組件會被渲染？
因爲子路由是屬於父組件的，切換路由的時候是改變了父組件的props，所有會觸發父組件的跟新；
react中如果數據更新只會更新相應的位置，這種技術是react的diff算法；
重繪是整個頁面重新刷新；
重排是局部；
【一定要記得寫子路由的顯示位置】
所有的路由的配置都寫在一個位置，包括所有嵌套路由：
所以子路由中的路由的嵌套不需要引入子子路由，而是在總的路由的配置中引入；並且這個時候記得to的路由路徑應該是加上子路由的；
關於調用某個方法去請求，有不同的參數，怎麼弄呢？
看server.js
配置路由時記得：path的寫法
<Route path="/home" component={Home}/>
路由跳轉方式：
路由帶參數寫法：
路由：
<Route path='/detail/:id' component={Detail}/>
1）js跳轉
this.props.history.push('/detail/' + value);
2)link
import { BrowserRouter as Router, Link} from "react-router-dom";
<Link to="/homePage" replace>list</Link>
子路由：
<div>{this.props.children}</div>
路由跳轉，但是之前的頁面保持state不變：
import { Redirect } from 'react-router-dom';
// ... your class implementation
handleOnClick = () => {
// some action...
// then redirect
this.setState({redirect: true});
}
render() {
if (this.state.redirect) {
return <Redirect push to="/sample" />; //or <Redirect push to="/sample?a=xxx&b=yyy" /> 傳遞更多參數
}
return <button onClick={this.handleOnClick} type="button">Button</button>;
或
<Redirect to={{
pathname: '/login',
search: '?utm=your+face',
state: { referrer: currentLocation }
/>
路由返回
react-route的話有：history.goback()
ps：window.history.back();也可以撒，爲啥不用？
V3與V4
React Router v4 還有很多其他很酷的方 面。最後，一定要提幾件小事，以免到時它們讓你措手不及。
<Link> vs <NavLink>
在 v4 中，有兩種方法可以將錨標籤與路由集成：<Link> 和 <NavLink>
<NavLink> 與 <Link> 一樣，但如果 <NavLink> 匹配瀏覽器的 URL，那麼它可以提供一些額外的樣式能力。例如，在示例應用程序中，有一個<PrimaryHeader> 組件看起來像這樣：
const PrimaryHeader = () => (
<header className="primary-header">
<h1>Welcome to our app!</h1>
<nav>
<NavLink to="/app" exact activeClassName="active">Home</NavLink>
<NavLink to="/app/users" activeClassName="active">Users</NavLink>
<NavLink to="/app/products" activeClassName="active">Products</NavLink>
</nav>
</header>
)
使用 <NavLink> 可以讓我給任何一個激活的鏈接設置一個 active 樣式。而且，需要注意的是，我也可以給它們添加 exact 屬性。如果沒有 exact，由於 v4 的包容性匹配策略，那麼在訪問 /app/users 時，主頁的鏈接將處於激活中。就個人經歷而言，NavLink 帶 exact屬性等價於 v3 的 <link>，而且更穩定。
URL 查詢字符串
再也無法從 React Router v4 中獲取 URL 的查詢字符串了。在我看來，做這個決定是因爲沒有關於如何處理複雜查詢字符串的標準。所以，他們決定讓開發者去選擇如何處理查詢字符串，而不是將其作爲一個選項嵌入到 v4 的模塊中。這是一件好事。
就個人而言，我使用的是 query-string，它是由 sindresorhus 大神寫的。
動態路由
關於 v4 最好的部分之一是幾乎所有的東西（包括 <Route>）只是一個 React 組件。路由不再是神奇的東西了。我們可以隨時隨地渲染它們。想象一下，當滿足某些條件時，你的應用程序的整個部分都可以路由到。當這些條件不滿足時，我們可以移除路由。甚至我們可以做一些瘋狂而且很酷的遞歸路由。
API：
1 match對象：
應用1：
<Route path="/users" component={UserLayout}/>
UserLayout:（由/users匹配渲染）
<nav>公共導航<nav>
<div>
<switch>
<Route path="/users" component={usertop}/>
<Route path="/user/:userId" component={userInfo}/>
</switch>
</div>
使用match：
<div>
<switch>
<Route path={props.match.path} component={usertop}/>
<Route path={`${props.match.path}/:userId`} component={userInfo}/>
</switch>
</div>
【match中的match.path與match.url】
path是路由的編寫
url是瀏覽器實際路徑
path用於匹配路由模式，用於構建嵌套<Route>
url匹配url，用於構建嵌套的<Link>
v4 API
【match】
match使用路由時：
<Route path={`${this.props.match.path}/agency`} component={AgencyDetail}/>
<Route path={`${this.props.match.path}/agency/:agencyId`} component={AgencyDetail}/>