單頁面應用

單頁面應用是使用一個 html 前提下，一次性載入 js ， css 等資源，所有頁面都在一個容器頁面下，頁面切換實質是元件的切換。

路由原理

請看https://www.cnblogs.com/renzhiwei2017/p/16051483.html

React的路由

History ，React-Router ， React-Router-Dom 三者的關係如下圖：

主要有兩種模式：
BrowserRouter模式和HashRouter模式。

在react路由中，這兩種模式分別由React-Router-dom 根據 history 提供的 createBrowserHistory 或者 createHashHistory 創建出不同的 history 物件。

import { createBrowserHistory as createHistory } from "history";
class BrowserRouter extends React.Component {
  history = createHistory(this.props) 
  render() {
    return <Router history={this.history} children={this.props.children} />;
  }
}

React-Router 基本構成

1. history location match

2. 路由元件

1） Router
開發者一般不會直接使用 Router ，而是使用 react-router-dom 中 BrowserRouter 或者 HashRouter。

2） Route
Route的工作主要就是一個： 匹配路由，路由匹配，渲染元件。Route 可以通過 RouterContext.Consumer 來獲取上一級傳遞來的路由進行路由匹配。

四種Route編寫格式：

• Component 形式
• render 形式
• children 形式
• renderProps 形式

function Index(){ 
    const mes = { name:'alien',say:'let us learn React!' }
    return <div>      
        <Meuns/>
        <Switch>
            <Route path='/router/component'   component={RouteComponent}   /> { /* Route Component形式 */ }
            <Route path='/router/render'  render={(props)=> <RouterRender { ...props }  /> }  {...mes}  /> { /* Render形式 */ }
            <Route path='/router/children'  > { /* chilren形式 */ }
                <RouterChildren  {...mes} />
            </Route>
            <Route path="/router/renderProps"  >
                { (props)=> <RouterRenderProps {...props} {...mes}  /> }  {/* renderProps形式 */}
            </Route>
        </Switch>
    </div>
}
export default Index

 

exact
Route 可以加上 exact ，來進行精確匹配。如果是巢狀路由的父路由，千萬不要加 exact=true 屬性。

3）Switch

Switch 作用就是匹配唯一正確的路由並渲染。

<Switch>
   <Route path='/home'  component={Home}  />
   <Route path='/list'  component={List}  />
   <Route path='/my'  component={My}  />
</Switch>

4） Redirect
Redirect 可以在路由不匹配情況下跳轉指定某一路由，適合路由不匹配或許可權路由的情況。

注意 Switch 包裹的 Redirect 要放在最下面，否則會被 Switch 優先渲染 Redirect ，導致路由頁面無法展示。

路由使用指南

1. 路由狀態獲取

• 通過props傳遞
• withRouter
  對於巢狀深的元件推薦使用withRouter
• useHistory 和 useLocation

import { useHistory ,useLocation  } from 'react-router-dom'
function Home(){
    const history = useHistory() /* 獲取history資訊 */
    const useLocation = useLocation() /* 獲取location資訊 */
}

2. 路由帶引數跳轉

2.1 路由跳轉

• 宣告式： ，利用 react-router-dom 裡面的 Link 或者 NavLink 。
• 函式式：histor.push('/home')

2.2 引數傳遞
url拼接

const name = 'alien'
const mes = 'let us learn React!'
history.push(`/home?name=${name}&mes=${mes}`)

state路由狀態

const name = 'alien'
const mes = 'let us learn React!'
history.push({
    pathname:'/home',
    state:{
        name,
        mes
    }
})

2.3 動態路徑引數路由

<Route path="/post/:id"  />

history.push('/post/'+id) // id為動態的文章id

2.4 巢狀路由

/* 第二層巢狀路由 */
function Home(){
    return <div>
        <Route path='/home/test' component={Test}   />
        <Route path='/home/test1' component={Test1}  />
    </div>
}

/* 第一層父級路由 */
function Index(){
    return <Switch>
        <Route path="/home" component={Home}  />
        <Route path="/list" component={List}  />
        <Route path="/my" component={My}  />
    </Switch>
}

巢狀路由子路由一定要跟隨父路由。比如父路由是 /home ，那麼子路由的形式就是 /home/xxx ，否則路由頁面將展示不出來。