什麼是React路由

• 主要使用HTML5的history API來同步UI和url
•   Router相當於一個容器,不會被渲染出來。元件都要放在Router裡面使用react-router的功能。
•   Link被渲染稱一個a標籤，通常以宣告式的方式被定義在應用程式中
•   Route包含一個path，並指明瞭在path與URL匹配時要渲染的元件。
•   （ 如果說我們的應用程式是一座小城的話，那麼Route就是一座座帶有門牌號的建築物，而Link就代表了到某個建築物的路線。有了路線和目的地，那麼就缺一位老司機了，沒錯Router就是這個老司機）

react路由中的（Prompt、Redirect、match、Switch）

1、Prompt元件 
它有一個必須的屬性message，用於給使用者提示資訊。每當使用者進行切換時，都會提示一條訊息。 
但是，有時候，我們希望提示訊息，有時候我們不希望提示出現，這就用到它的另外一個屬性-when。when有兩種情況，當它的值是true時，會提示訊息。當它的值為false時，不會提示訊息。 
使用方式：

<Prompt when={true} message="您確定要離開當前頁面嗎？"/>

2.Redirect元件 

用一個對應的新的地址的Route，來指定重定向的介面

<Route path="/home" render={()=><Redirect to="/other"/>}/>

重定向有兩種方式<Redirect> 標籤和程式設計式導航方式

1.<Redirect to={'/default'}/>


2.this.props.history.push('/default')

3.match物件 

match是一個匹配路徑引數的物件，它有一個屬性params，裡面的內容就是路徑引數，除常用的params屬性外，它還有url、path、isExact屬性。

class Match extends Component{
    render(){
        return (
            <div>id:{this.props.match.params.id}</div>
        )
    }
}

class Main extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to="/home">首頁</Link></li>
                        <li><Link to="/other">其他頁</Link></li>
                    </ul>

                    <Route path="/:id" component={Match}/>
                </div>
            </Router>
        )
    }
}
 

4.Switch元件 

它的特性是我們只渲染所匹配到的第一個路由元件，一般介面渲染的時候，會渲染所有匹配到的路由元件。它的孩子節點只能是Route元件或者Redirect元件。

import { Switch } from "react-router-dom";

<Switch>
    <Route path="/" component={Test1} />
    <Route path="/Test" component={Test2} />
</Switch>

react路由怎樣進行傳參

方式 一：

         通過params

        1.路由表中                   

<Route path=' /sort/:id '   component={Sort}></Route>　

        2.Link處        

            HTML方式

  <Link to={ ' /sort/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>       

          JS方式    

 this.props.router.push(  '/sort/'+'2'  )　　

        3.sort頁面       

               通過  this.props.params.id        就可以接受到傳遞過來的引數（id）

 方式 二：

         通過query

                前提：必須由其他頁面跳過來，引數才會被傳遞過來

　　　     注：不需要配置路由表。路由表中的內容照常：<Route path='/sort' component={Sort}></Route>

        1.Link處      

         HTML方式

 <Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>

       JS方式     

    this.props.router.push({ path : '/sort' ,query : { name: ' sunny'} })

        2.sort頁面     

      this.props.location.query.name

   方式 三：

        通過state

            同query差不多，只是屬性不一樣，而且state傳的引數是加密的，query傳的引數是公開的，在位址列

        1.Link 處      

          HTML方式：

 <Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 

         JS方式：

 this.props.router.push({ pathname:'/sort',state:{name : 'sunny' } })

        2.sort頁面       

 this.props.location.state.name

react路由巢狀

const Topics = ( {match} ) => {
    return  <div>
              <h3>我是列表</h3>
              <ul>
                <li><Link to={`${match.url}/react`}>a</Link></li>
                <li><Link to={`${match.url}/router`}>b</Link></li>
                <li><Link to={`${match.url}/redux`}>c</Link></li>
              </ul>
              <hr/>
              <Route path={`${match.url}/:topicId`} component={Topic}/>
            </div>
};
const Topic = ({match}) => {
  return <div><h3>{match.params.topicId}</h3></div>
};
 
class App extends Component {
  render() {
    return (
        <Router>
           <div>
             <ul>
               <li><Link to="/">首頁</Link></li>
               <li><Link to="/about">關於</Link></li>
               <li><Link to="/topics">列表</Link></li>
             </ul>
             <hr/>
             <Route exact={true} path="/" component={Home}  />
             <Route path="/about" component={About} />
             <Route path="/topics" component={Topics} />
           </div>
        </Router>
    );
  }
}
export default App

1.首先在Topics元件上 有個match物件，然後我們繼續在Topics元件定義 Link 在路徑上 to={`${match.url}/react`}  ` ${match.url}` 返回的就是 '/topics'    所以{`${match.url}/react`}  == '/topics/react'

Link和NavLink

Link

// to為string
<Link to="/about">關於</Link>
 
// to為obj
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>
 
// replace 
<Link to="/courses" replace />

• 如果使用錨點元素實現，在每次點選時，頁面被重新載入，React Router提供了<Link>元件用來避免這種狀況發生。當 你點選<Link>時，url會更新，元件會被重新渲染，但是頁面不會重新載入
• <Link>使用to引數來描述需要定位的頁面。它的值既可是字串，也可以是location物件（包含pathname、search、hash、與state屬性）如果其值為字串，將會被轉換為location物件
• replace(bool)：為 true 時，點選連結後將使用新地址替換掉訪問歷史記錄裡面的原地址；為 false 時，點選連結後將在原有訪問歷史記錄的基礎上新增一個新的紀錄。預設為 false；
• Link 元件最終會渲染為 HTML 標籤 <a>，它的 to、query、hash 屬性會被組合在一起並渲染為 href 屬性

NavLink

• <NavLink>是<Link>的一個特定版本，會在匹配上當前的url的時候給已經渲染的元素新增引數，元件的屬性有
• activeClassName(string)：設定選中樣式，預設值為active
• activeStyle(object)：當元素被選中時，為此元素新增樣式
• exact(bool)：為true時，只有當導致和完全匹配class和style才會應用
• strict(bool)：為true時，在確定為位置是否與當前URL匹配時，將考慮位置pathname後的斜線
• isActive(func)判斷連結是否啟用的額外邏輯的功能