React使用路由

使用React構建SPA應用(單頁面應用)，要想實現(xiàn)頁面間的跳轉，首先想到的就是使用路由。在React中，常用的有兩個包可以實現(xiàn)這個需求，那就是react-router和react-router-dom。本文主要針對react-router-dom進行說明。

眾所周知,JS由 DOM BOM ECMAScript 組成, React-Router-Dom 使用 BOM 提供的 history API

React-Router-Dom有兩種路由方式 HashRouter和BrowserRouter

• HashRouter特點 在URL中采用#號來作為當前視圖的地址,改變#號后的參數(shù)，頁面并不會重載
• BrowserRouter特點 和正常瀏覽網(wǎng)易url類似 頁面并不會重載

React-Router-Dom 導航實現(xiàn)

管他三七二十一 先安裝再說: yarn add react-router-dom

在使用React-Router-Dom的API之前 需要使用BrowserRouter 或 HashRouter包裹住

// 將路由定義為根組件
import {BrowserRouter, HashRouter as Router} from 'react-router-dom';

ReactDOM.render(
    <Router>
        <App />
    </Router>
, document.getElementById('root'));

// 然后定義路由
 <Switch>
      <Route exact path="/組件1" component={組件1} />
      <Route path="/組件2" component={組件2} />
      <Route path="/組件3">
            <組件3 />
      </Route>
      <Route render={(props) => {
            return (
                <div>
                    Router Not Found~ 404
                </div>
            );
      }} />      
</Switch>

// 導航實現(xiàn)
<NavLink to="/組件1" activeStyle={activeStyle}>組件1</NavLink>
<NavLink to="/組件2" activeStyle={activeStyle}>組件2</NavLink>
<Link to="/組件3" activeStyle={activeStyle}>組件3</Link>

以上代碼已經(jīng)實現(xiàn)了一個基本的導航

示例:

導航代碼剖析

BrowserRouter 和 HashRouter已經(jīng)介紹過了 兩種url不同的展現(xiàn)形式
定義路由時使用了三種不同的方式:

• 指定component對應的組件
• 將組件作為子組件
• 對router指定render函數(shù)。返回一個組件

幾種聲明方式的區(qū)別:

• 第一種直接指定是比較常見的 這樣會將history對象直接注入到組件的props
• 第二種是路由跳轉過去只展示對應組件 props里面不存在history對象 如果想使用history對象的需要使用withRouter這個高階函數(shù) 進行history注入
• 第三種可以直接傳入props 直接擁有history對象 比較方便

Switch組件:
類似于編程語言的條件控制語句,匹配到一個Route就不會往下匹配了

Route組件:
如果Route沒用指定path 只要匹配不到path的都會渲染這個組件 可以用這個增加用戶體驗 實現(xiàn)一個友好404頁面

exact屬性 嚴格匹配路由 防止 /one 匹配到 /one/two這個路由 因為路由的匹配順序是至上而下 定義兩個路由如果 /one/two 在前面的話 不使用嚴格匹配則不會返回預期結果

• NavLink 和Link
  這兩個組件都是對 <a href="">A鏈接</a> 的一種封裝 但是使用場景不太一樣
  如果選擇導航欄的時候使用NavLink非常合適 因為他直接提供activeStyle等屬性 直接聚焦在這個組件上時style會應用給組件

Link一般作用于跳轉到其他頁面 實則就是A鏈接

React-Router-Dom 頁面跳轉參數(shù)傳遞

主要就是使用history對象進行頁面跳轉

API介紹：

• history.goBack() 返回上一頁
• history.replace() 在有些場景下面 重復使用push 或者 a標簽會產(chǎn)生死循環(huán) 為了避免這種情況發(fā)生 在可能出現(xiàn)死循環(huán)的地方使用replace方式來跳轉
• history.push() 進入新頁面

頁面參數(shù)傳遞

• 第一種

    // 隱示傳參
    傳遞
    props.history.push(`/test`, {
                name: 'sb'
            });
    獲取
    props.location.state        

• 第二種

    傳遞
    props.history.push({
                pathname: '/test',
                query: {
                    id: 1
                }
            });
    獲取
    props.location.query       

• 第三種

    傳遞
    props.history.push('/about/1');
    獲取
    props.match.params 
    
    
    或者
    props.history.push('/about?id=1');
    獲取
    props.location.search

示例：

代碼

常用API

• HashRouter 瀏覽器會在路由砂鍋出現(xiàn)#號字樣 (一般會當成根組件使用)
• BrowserRouter 瀏覽器路由正常顯示 (一般會當成根組件使用)
• Link 對a標簽的一個封裝
• to屬性對應的值可以是字符串 也可以是location對象 一般作用于做跳轉
• NavLink 一般作用于做導航 可以控制選中之后的樣式
• Redirect 重定向跳轉
• Route 路由分配 哪個path對應哪個路由
• exact 嚴格匹配
• component 指定渲染的組件
• Prompt 確定是否離開當前頁面提示 監(jiān)聽離開事件

HOOKs 對于函數(shù)組件的一些history操作

• useRouteMatch()
• useParams()

來源參考：憧憬在 aoppp.com發(fā)布文章來源地址http://www.zghlxwxcb.cn/news/detail-478337.html

到了這里，關于React-Router 5.0 制作導航欄+頁面參數(shù)傳遞的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！