react路由基礎及v3與v4的一些差異

路由帶參數寫法：

    <Router history={hashHistory}>//定義跳轉方式#
   		<Route path="/" component={main}>
    		<Route path="/detail/:id" commmponent={detail}></Route>
    		<Route push to="/goods?a=xxx&b=yyy" /> 
    		<Route push to=to={{
			pathname: '/login',
			search: '?utm=your+face',
			state: { referrer: currentLocation }/> 
   		</Route>
	</Router>.docuemnt.elementId("app")

問題：
當/detail 不帶參數的時候會報錯
解決方式：

vue是使用 path=“home/:id？”

獲取路由參數：

class home …{
return (

home

{this.props.params.id}

) }

react路由跳轉方式：

• js跳轉

this.props.history.push('/detail/' + value);

• Link標籤跳轉

calss main extent  component {
   return{
        <div><Link to="/home ">home</Link></div>
        <div>{this.props.children}</div>//子路由顯示的地方
     }
}

react路由類型：

• 默認路由:
  V3的< IndexRoute >
  V4的< Route exact>;

 <switch>
     <Route path="/" exact component={home}/>
      <Redirect to="/" />
  </switch>

• 授權路由：

< Redirect > 組件
它會始終執行瀏覽器重定向，當處於中時，只有其他路由不匹配的情況下，纔會渲染重定向組件；

• 包容性路由：
  例：

<header>
  <Route path="/user" component={usertop}/>
  <Route path="/user" component={userbottom}/>
  <Route path="/user/list" component={userlist}/>
</header>

V3路由有排他性，即一次只能渲染一條，
V4中上面的會將匹配的路由的組件都渲染，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(因爲這裏使用了switch排他路由)

所以，當需要同時匹配 /user 和/user/list的話，可將/user/list寫於 /user前面，

<header>
  <switch>
     <Route path="/" exact component={home}/>
      <Route path="/user/list" component={userlist}/>
     <Route path="/user" component={usertop}/>
      <Redirect to="/" />
  </switch>
</header>

路由的動態匹配：

 <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

怎麼看元素是否被重新渲染：

在console中的rendeing；
把Paint Flashing勾選上，當渲染的時候會有標記；

子路由跳轉的渲染機制：

這裏的子路由的跳轉，每次都會加載子組件以及父組件重新加載，然後移除(刪除，在生命週期的右邊)其他的路由；
爲什麼父組件會被渲染？
因爲子路由是屬於父組件的，切換路由的時候是改變了父組件的props，所以會觸發父組件的更新；
react中如果數據更新只會更新相應的位置，這種技術是react的diff算法；
重繪是整個頁面重新刷新；
重排是局部；

react 路由的配置

與vue不同的是，v4的路由不需要寫抽象路由，直接哪裏需要放哪裏，路由標籤替代抽象路由。
但是，所有的路由的配置都寫在一個位置，包括所有嵌套路由：
所以子路由中的路由的嵌套不需要引入子路由，而是在總的路由的配置中引入；並且這個時候記得to的路由路徑應該是加上子路由的路徑；
例一個項目的路由配置，這裏寫在app.js：

 <div id='AppMain'>
                    <Switch>
                    <Route path="/" exact component={Home}/>
                    <Route path="/Home" component={Home}/>
                    <Route path="/Goods" component={Goods}/>
                    <Route path="/Account" component={Account}/>
                    </Switch>
                </div>

路由返回

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 的 ，而且更穩定。

• URL 查詢字符串
  再也無法從 React Router v4 中獲取 URL 的查詢字符串了

• 動態路由
  關於 v4 （ ）路由,可以隨時隨地渲染它們。

v4 API：

• match對象：

<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用於匹配路由模式，用於構建嵌套
url匹配url，用於構建嵌套的

v4 API
【match】
match使用路由時：
<Route path={${this.props.match.path}/agency} component={AgencyDetail}/>
<Route path={${this.props.match.path}/agency/:agencyId} component={AgencyDetail}/>

[以上太久之前的筆記了，如有錯誤，請指出☺]