2020-03-12

React Router教程

https://malun666.github.io/aicoder_vip_doc/#/pages/Vip3_react_router?id=react-router%e6%95%99%e7%a8%8b
React項目的可用的路由庫是React-Router,當(dāng)然這也是官方支持的主经。它也分為:

  • react-router 核心組件
  • react-router-dom 應(yīng)用于瀏覽器端的路由庫(單獨(dú)使用包含了react-router的核心部分)
  • react-router-native 應(yīng)用于native端的路由

以下教程我們都以Web端為主,所以所有的教程內(nèi)容都是默認(rèn)關(guān)于react-router-dom的介紹。

<meta charset="utf-8">

進(jìn)行網(wǎng)站(將會運(yùn)行在瀏覽器環(huán)境中)構(gòu)建盈包,我們應(yīng)當(dāng)安裝react-router-dom吟逝。react-router-dom暴露出react-router中暴露的對象與方法,因此你只需要安裝并引用react-router-dom即可。

官方文檔地址: https://reacttraining.com/react-router/web/guides/philosophy

Installation | 安裝

安裝:

yarn add react-router-dom
# 或者夹界,不使用 yarn
npm install react-router-dom

路由的基本概念

現(xiàn)在的React Router版本中已不需要路由配置戈次,現(xiàn)在一切皆組件轩勘。

*ReactRouter中提供了以下三大組件:
*Router是所有路由組件共用的底層接口組件,它是路由規(guī)則制定的最外層的容器怯邪。
*Route路由規(guī)則匹配绊寻,并顯示當(dāng)前的規(guī)則對應(yīng)的組件。
*Link路由跳轉(zhuǎn)的組件

當(dāng)然每個組件下又會有幾種不同的子類組件實現(xiàn)。比如: Router組件就針對不同功能和平臺對應(yīng)用:

  • <BrowserRouter> 瀏覽器的路由組件
  • <HashRouter> URL格式為Hash路由組件
  • <MemoryRouter>內(nèi)存路由組件
  • <NativeRouter> Native的路由組件
  • <StaticRouter> 地址不改變的靜態(tài)路由組件
    三大組件使用的關(guān)系
    image.png

    如果說我們的應(yīng)用程序是一座小城的話澄步,那么Route就是一座座帶有門牌號的建筑物冰蘑,而Link就代表了到某個建筑物的路線。有了路線和目的地村缸,那么就缺一位老司機(jī)了祠肥,沒錯Router就是這個老司機(jī)。

第一個Demo

現(xiàn)在你可以復(fù)制任意的示例代碼梯皿,并粘貼到 src/App.js仇箱。如下:

import React, { Component } from 'react';
import { HashRouter as Router, Link, Route } from 'react-router-dom';
import './App.css';

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Product = () => (
  <div>
    <h2>Product</h2>
  </div>
)

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Link to="/">Home</Link>
          <Link to="/About">About</Link>
          <Link to="/Product">Product</Link>
          <hr/>
          <Route path="/" exact component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/product" component={Product}></Route>
        </div>
      </Router>
    );
  }
}

export default App;

Router組件

BrowserRouter組件

BrowserRouter主要使用在瀏覽器中,也就是WEB應(yīng)用中索烹。它利用HTML5 的history API來同步URL和UI的變化工碾。當(dāng)我們點擊了程序中的一個鏈接之后,BrowserRouter就會找出與這個URL匹配的Route,并將他們對應(yīng)的組件渲染出來百姓。 BrowserRouter是用來管理我們的組件的渊额,那么它當(dāng)然要被放在最頂級的位置,而我們的應(yīng)用程序的組件就作為它的一個子組件而存在垒拢。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.body);

BrowserRouter組件提供了四個屬性旬迹。

  • basename: 字符串類型,路由器的默認(rèn)根路徑
  • forceRefresh: 布爾類型求类,在導(dǎo)航的過程中整個頁面是否刷新
  • getUserConfirmation: 函數(shù)類型奔垦,當(dāng)導(dǎo)航需要確認(rèn)時執(zhí)行的函數(shù)。默認(rèn)是:window.confirm
  • keyLength: 數(shù)字類型location.key 的長度尸疆。默認(rèn)是 6

basename 屬性

當(dāng)前位置的基準(zhǔn) URL椿猎。如果你的頁面部署在服務(wù)器的二級(子)目錄,你需要將 basename 設(shè)置到此子目錄寿弱。正確的 URL 格式是前面有一個前導(dǎo)斜杠犯眠,但不能有尾部斜杠。

例如:有時候我們的應(yīng)用只是整個系統(tǒng)中的一個模塊症革,應(yīng)用中的URL總是以 http://localhost/admin/ 開頭筐咧。這種情況下我們總不能每次定義Link和Route的時候都帶上admin吧?react-router已經(jīng)考慮到了這種情況噪矛,所以為我們提供了一個basename屬性量蕊。為BrowserRouter設(shè)置了basename之后,Link中就可以省略掉admin了艇挨,而最后渲染出來的URL又會自動帶上admin残炮。

<BrowserRouter basename="/admin"/>
    ...
    <Link to="/home"/> // 被渲染為 <a href="/admin/home">
    ...
</BrowserRouter>

getUserConfirmation: func

當(dāng)導(dǎo)航需要確認(rèn)時執(zhí)行的函數(shù)。默認(rèn)使用 window.confirm缩滨。

// 使用默認(rèn)的確認(rèn)函數(shù)
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation}/>

forceRefresh: bool

當(dāng)設(shè)置為 true 時吉殃,在導(dǎo)航的過程中整個頁面將會刷新辞居。 只有當(dāng)瀏覽器不支持 HTML5 的 history API 時,才設(shè)置為 true蛋勺。

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

keyLength: number

location.key 的長度瓦灶。默認(rèn)是 6。

<BrowserRouter keyLength={12}/>

children: node

渲染單一子組件(元素)抱完。

HashRouter

HashRouter 使用 URL 的 hash (例如:window.location.hash) 來保持 UI 和 URL 的同步贼陶。

注意: 使用 hash 的方式記錄導(dǎo)航歷史不支持 location.keylocation.state。在以前的版本中巧娱,我們?yōu)檫@種行為提供了 shim碉怔,但是仍有一些問題我們無法解。任何依賴此行為的代碼或插件都將無法正常使用禁添。由于該技術(shù)僅用于支持傳統(tǒng)的瀏覽器撮胧,因此在用于瀏覽器時可以使用 <BrowserHistory> 代替。

BrowserRouter類似老翘,它也有:basename芹啥、getUserConfirmationchildren屬性铺峭,而且是一樣的墓怀。

hashType: string

window.location.hash 使用的 hash 類型。有如下幾種:

  • "slash" - 后面跟一個斜杠卫键,例如 #/#/sunshine/lollipops
  • "noslash" - 后面沒有斜杠傀履,例如 ##sunshine/lollipops
  • "hashbang" - Google 風(fēng)格的 "ajax crawlable",例如 #!/#!/sunshine/lollipops

默認(rèn)為 "slash"莉炉。

MemoryRouter

主要用在ReactNative這種非瀏覽器的環(huán)境中钓账,因此直接將URL的history保存在了內(nèi)存中。 StaticRouter 主要用于服務(wù)端渲染絮宁。

Link組件

Link就像是一個個的路牌梆暮,為我們指明組件的位置。Link使用聲明式的方式為應(yīng)用程序提供導(dǎo)航功能羞福,定義的Link最終會被渲染成一個a標(biāo)簽惕蹄。Link使用to這個屬性來指明目標(biāo)組件的路徑蚯涮,可以直接使用一個字符串治专,也可以傳入一個對象。

import { Link } from 'react-router-dom'
// 字符串參數(shù)
<Link to="/query">查詢</Link>

// 對象參數(shù)
<Link to={{
  pathname: '/query',
  search: '?key=name',
  hash: '#hash',
  state: { fromDashboard: true }
}}>查詢</Link>

屬性: to

需要跳轉(zhuǎn)到的路徑(pathname)或地址(location)遭顶。

屬性:replace: bool

當(dāng)設(shè)置為 true 時张峰,點擊鏈接后將使用新地址替換掉訪問歷史記錄里面的原地址。

當(dāng)設(shè)置為 false 時棒旗,點擊鏈接后將在原有訪問歷史記錄的基礎(chǔ)上添加一個新的紀(jì)錄喘批。

默認(rèn)為 false撩荣。

<Link to="/courses" replace />

NavLink組件

NavLink是一個特殊版本的Link,可以使用activeClassName來設(shè)置Link被選中時被附加的class饶深,使用activeStyle來配置被選中時應(yīng)用的樣式餐曹。此外,還有一個exact屬性,此屬性要求location完全匹配才會附加class和style敌厘。這里說的匹配是指地址欄中的URl和這個Link的to指定的location相匹配台猴。

// 選中后被添加class selected
<NavLink to={'/'} exact activeClassName='selected'>Home</NavLink>
// 選中后被附加樣式 color:red
<NavLink to={'/gallery'} activeStyle={{color:red}}>Gallery</NavLink>

activeClassName默認(rèn)值為 active

屬性

  • to 可以是字符串或者對象,同Link組件
  • exact 布爾類型俱两,完全匹配時才會被附件class和style
  • activeStyle Object類型
  • activeClassName 字符串類型
  • strict: bool類型饱狂,當(dāng)值為 true 時,在確定位置是否與當(dāng)前 URL 匹配時宪彩,將考慮位置 pathname 后的斜線休讳。

Route組件

Route應(yīng)該是react-route中最重要的組件了,它的作用是當(dāng)location與Route的path匹配時渲染Route中的Component尿孔。如果有多個Route匹配俊柔,那么這些Route的Component都會被渲染。

與Link類似纳猫,Route也有一個exact屬性婆咸,作用也是要求location與Route的path絕對匹配

// 當(dāng)location形如 http://location/時芜辕,Home就會被渲染尚骄。
// 因為 "/" 會匹配所有的URL,所以這里設(shè)置一個exact來強(qiáng)制絕對匹配侵续。
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>

Route的三種渲染方式

  1. component: 這是最常用也最容易理解的方式倔丈,給什么就渲染什么。
  2. render: render的類型是function状蜗,Route會渲染這個function的返回值需五。因此它的作用就是附加一些額外的邏輯。
<Route path="/home" render={() => {
    console.log('額外的邏輯');
    return (<div>Home</div>);
    }/>

  1. children: 這是最特殊的渲染方式轧坎。

一宏邮、它同render類似,是一個function。不同的地方在于它會被傳入一個match參數(shù)來告訴你這個Route的path和location匹配上沒有缸血。
二蜜氨、第二個特殊的地方在于,即使path沒有匹配上捎泻,我們也可以將它渲染出來飒炎。秘訣就在于前面一點提到的match參數(shù)。我們可以根據(jù)這個參數(shù)來決定在匹配的時候渲染什么笆豁,不匹配的時候又渲染什么郎汪。

// 在匹配時赤赊,容器的calss是light,<Home />會被渲染
// 在不匹配時煞赢,容器的calss是dark抛计,<About />會被渲染
<Route path='/home' children={({ match }) => (
    <div className={match ? 'light' : 'dark'}>
      {match ? <Home/>:<About>}
    </div>
  )}/>

所有路由中指定的組件將被傳入以下三個 props 。

  • match.
  • location.
  • history.

這里主要說下match.params.透過這個屬性照筑,我們可以拿到從location中解析出來的參數(shù)爷辱。當(dāng)然,如果想要接收參數(shù)朦肘,我們的Route的path也要使用特殊的寫法饭弓。

如下示例,三個Link是一個文章列表中三個鏈接媒抠,分別指向三篇id不同的文章弟断。而Route用于渲染文章詳情頁。注意path='/p/:id' 趴生,location中的對應(yīng)的段會被解析為id=1 這樣的鍵值阀趴。最終這個鍵值會作為param的鍵值存在。Route中的組件可以使用this.props.match.params.id來獲取苍匆,示例中使用了結(jié)構(gòu)賦值刘急。

<Link to='/p/1' />
<Link to='/p/2' />
<Link to='/p/3' />
......
<Route path='/p/:id' render={(match)=<h3>當(dāng)前文章ID:{match.params.id}</h3>)} />

location

Location 是指你當(dāng)前的位置,下一步打算去的位置浸踩,或是你之前所在的位置叔汁,形式大概就像這樣:

{
  key: 'ac3df4', // 在使用 hashHistory 時,沒有 key
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

你使用以下幾種方式來獲取 location 對象:

  • Route component 中检碗,以 this.props.location 的方式獲取据块,
  • Route render 中,以 ({ location }) => () 的方式獲取折剃,
  • Route children 中另假,以 ({ location }) => () 的方式獲取,
  • withRouter 中怕犁,以 this.props.location 的方式獲取边篮。

你也可以在 history.location 中獲取 location 對象,但是別那么寫奏甫,因為 history 是可變的戈轿。更多信息請參見 history 文檔

location 對象不會發(fā)生改變扶檐,因此你可以在生命周期的鉤子函數(shù)中使用 location 對象來查看當(dāng)前頁面的位置是否發(fā)生改變凶杖,這種技巧在獲取遠(yuǎn)程數(shù)據(jù)以及使用動畫時非常有用胁艰。

componentWillReceiveProps(nextProps) {
  if (nextProps.location !== this.props.location) {
    // 已經(jīng)跳轉(zhuǎn)了款筑!
  }
}

通常情況下智蝠,你只需要給一個字符串當(dāng)做 location ,但是奈梳,當(dāng)你需要添加一些 location 的狀態(tài)時杈湾,你可以對象的形式使用 location 。并且當(dāng)你需要多個 UI 攘须,而這些 UI 取決于歷史時漆撞,例如彈出框(modal),使用location 對象會有很大幫助于宙。

// 通常你只需要這樣使用 location
<Link to="/somewhere"/>

// 但是你同樣可以這么用
const location = {
  pathname: '/somewhere'
  state: { fromDashboard: true }
}

<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)

最后浮驳,你可以把 location 傳入一下組件:

  • [Route]
  • [Switch]

這樣做可以讓組件不使用路由狀態(tài)(router state)中的真實 location,因為我們有時候需要組件去渲染一個其他的 location 而不是本身所處的真實 location捞魁,比如使用動畫或是等待跳轉(zhuǎn)時至会。

history

本文檔中的「history」以及「history對象」請參照 history中的內(nèi)容。 History 是 React Router 的兩大重要依賴之一(除去 React 本身)谱俭,在不同的 Javascript 環(huán)境中奉件,history 以多種形式實現(xiàn)了對于 session 歷史的管理。

我們會經(jīng)常使用以下術(shù)語:

  • 「browser history」 - history 在 DOM 上的實現(xiàn)昆著,經(jīng)常使用于支持 HTML5 history API 的瀏覽器端县貌。
  • 「hash history」 - history 在 DOM 上的實現(xiàn),經(jīng)常使用于舊版本瀏覽器端凑懂。
  • 「memory history」 - 一種存儲于內(nèi)存的 history 實現(xiàn)煤痕,經(jīng)常用于測試或是非 DOM 環(huán)境(例如 React Native)。

history 對象通常會具有以下屬性和方法:

  • length -( number 類型)指的是 history 堆棧的數(shù)量接谨。
  • action -( string 類型)指的是當(dāng)前的動作(action)杭攻,例如 PUSHREPLACE 以及 POP 疤坝。
  • location -( object類型)是指當(dāng)前的位置(location)兆解,location 會具有如下屬性:
    • pathname -( string 類型)URL路徑。
    • search -( string 類型)URL中的查詢字符串(query string)跑揉。
    • hash -( string 類型)URL的 hash 分段锅睛。
    • state -( string 類型)是指 location 中的狀態(tài),例如在 push(path, state) 時历谍,state會描述什么時候 location 被放置到堆棧中等信息现拒。這個 state 只會出現(xiàn)在 browser history 和 memory history 的環(huán)境里。
  • push(path, [state]) -( function 類型)在 hisotry 堆棧頂加入一個新的條目望侈。
  • replace(path, [state]) -( function 類型)替換在 history 堆棧中的當(dāng)前條目印蔬。
  • go(n) -( function 類型)將 history 對戰(zhàn)中的指針向前移動 n
  • goBack() -( function 類型)等同于 go(-1) 脱衙。
  • goForward() -( function 類型)等同于 go(1) 侥猬。
  • block(prompt) -( function 類型)阻止跳轉(zhuǎn)例驹,(請參照 history 文檔

match

match 對象包含了 <Route path> 如何與URL匹配的信息。match 對象包含以下屬性:

  • params -( object 類型)即路徑參數(shù)退唠,通過解析URL中動態(tài)的部分獲得的鍵值對鹃锈。
  • isExact - 當(dāng)為 true 時,整個URL都需要匹配瞧预。
  • path -( string 類型)用來做匹配的路徑格式屎债。在需要嵌套 <Route> 的時候用到。
  • url -( string 類型)URL匹配的部分垢油,在需要嵌套 <Link> 的時候會用到盆驹。

你可以在以下地方獲取 match 對象:

  • 在 Route component 中,以 this.props.match 方式滩愁。
  • 在 Route render中召娜,以 ({ match }) => () 方式。
  • 在 Route children中惊楼,以 ({ match }) => () 方式

Redirect組件

當(dāng)這個組件被渲染是玖瘸,location會被重寫為Redirect的to指定的新location。它的一個用途是登錄重定向檀咙,比如在用戶點了登錄并驗證通過之后雅倒,將頁面跳轉(zhuǎn)到個人主頁。

<Redirect to="/new"/>

Switch組件

渲染匹配地址(location)的第一個 <Route>或者<Redirect>

這與只使用一堆<Route>有什么不同弧可?

<Switch>的獨(dú)特之處是獨(dú)它僅僅渲染一個路由蔑匣。相反地,每一個包含匹配地址(location)的<Route>都會被渲染棕诵。思考下面的代碼:

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

如果現(xiàn)在的URL是 /about 裁良,那么 <About>, <User>, 還有 <NoMatch> 都會被渲染,因為它們都與路徑(path)匹配校套。這種設(shè)計价脾,允許我們以多種方式將多個 <Route> 組合到我們的應(yīng)用程序中,例如側(cè)欄(sidebars)笛匙,面包屑(breadcrumbs)侨把,bootstrap tabs等等。 然而妹孙,偶爾我們只想選擇一個<Route> 來渲染秋柄。如果我們現(xiàn)在處于 /about,我們也不希望匹配 /:user (或者顯示我們的 "404" 頁面 )蠢正。以下是使用 Switch 的方法來實現(xiàn):

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

現(xiàn)在骇笔,如果我們處于 /about, <Switch> 將開始尋找匹配的 <Route><Route path="/about"/> 將被匹配, <Switch> 將停止尋找匹配并渲染<About>笨触。 同樣懦傍,如果我們處于 /michael<User> 將被渲染旭旭。

這對于過渡動畫也是起作用的,因為匹配的 <Route> 在與前一個相同的位置被渲染葱跋。

<Fade>
  <Switch>
    {/* there will only ever be one child here */}
    {/* 這里只會有一個子節(jié)點 */}
    <Route/>
    <Route/>
  </Switch>
</Fade>

<Fade>
  <Route/>
  <Route/>
  {/* there will always be two children here,
      one might render null though, making transitions
      a bit more cumbersome to work out */}
   {/* 這里總是有兩個子節(jié)點,
      一個可能會渲染為null, 使計算過渡增加了一點麻煩 */}    
</Fade>

路由配置

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// Some folks find value in a centralized route config.
// A route config is just data. React is great at mapping
// data into components, and <Route> is a component.

////////////////////////////////////////////////////////////
// first our route components
const Main = () => <h2>Main</h2>;

const Sandwiches = () => <h2>Sandwiches</h2>;

const Tacos = ({ routes }) => (
  <div>
    <h2>Tacos</h2>
    <ul>
      <li>
        <Link to="/tacos/bus">Bus</Link>
      </li>
      <li>
        <Link to="/tacos/cart">Cart</Link>
      </li>
    </ul>

    {routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
  </div>
);

const Bus = () => <h3>Bus</h3>;
const Cart = () => <h3>Cart</h3>;

////////////////////////////////////////////////////////////
// then our route config
const routes = [
  {
    path: "/sandwiches",
    component: Sandwiches
  },
  {
    path: "/tacos",
    component: Tacos,
    routes: [
      {
        path: "/tacos/bus",
        component: Bus
      },
      {
        path: "/tacos/cart",
        component: Cart
      }
    ]
  }
];

// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
const RouteWithSubRoutes = route => (
  <Route
    path={route.path}
    render={props => (
      // pass the sub-routes down to keep nesting
      <route.component {...props} routes={route.routes} />
    )}
  />
);

const RouteConfigExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/tacos">Tacos</Link>
        </li>
        <li>
          <Link to="/sandwiches">Sandwiches</Link>
        </li>
      </ul>

      {routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
    </div>
  </Router>
);

export default RouteCon
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末持寄,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子娱俺,更是在濱河造成了極大的恐慌稍味,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荠卷,死亡現(xiàn)場離奇詭異模庐,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)油宜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進(jìn)店門掂碱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人慎冤,你說我怎么就攤上這事疼燥。” “怎么了蚁堤?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵醉者,是天一觀的道長。 經(jīng)常有香客問我披诗,道長撬即,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任呈队,我火速辦了婚禮剥槐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘宪摧。我一直安慰自己才沧,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布绍刮。 她就那樣靜靜地躺著温圆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪孩革。 梳的紋絲不亂的頭發(fā)上岁歉,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼锅移。 笑死熔掺,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的非剃。 我是一名探鬼主播置逻,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼备绽!你這毒婦竟也來了券坞?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤肺素,失蹤者是張志新(化名)和其女友劉穎恨锚,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體倍靡,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡猴伶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了塌西。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片他挎。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖捡需,靈堂內(nèi)的尸體忽然破棺而出雇盖,到底是詐尸還是另有隱情,我是刑警寧澤栖忠,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布崔挖,位于F島的核電站,受9級特大地震影響庵寞,放射性物質(zhì)發(fā)生泄漏狸相。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一捐川、第九天 我趴在偏房一處隱蔽的房頂上張望脓鹃。 院中可真熱鬧,春花似錦古沥、人聲如沸瘸右。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽太颤。三九已至,卻和暖如春盹沈,著一層夾襖步出監(jiān)牢的瞬間龄章,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留做裙,地道東北人岗憋。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像锚贱,于是被迫代替她去往敵國和親仔戈。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,601評論 2 353

推薦閱讀更多精彩內(nèi)容

  • React Router教程 React項目的可用的路由庫是React-Router,當(dāng)然這也是官方支持的拧廊。它也分...
    c52f06c5c520閱讀 65評論 0 0
  • [React Router教程] React項目的可用的路由庫是React-Router,當(dāng)然這也是官方支持的监徘。它...
    遲幕_c475閱讀 83評論 0 0
  • React Router教程 React項目的可用的路由庫是React-Router,當(dāng)然這也是官方支持的。它也分...
    IT老馬閱讀 58,884評論 0 49
  • React Router教程 React項目的可用的路由庫是React-Router,當(dāng)然這也是官方支持的卦绣。它也分...
    CLYDE_6715閱讀 268評論 0 0
  • React Router教程 React項目的可用的路由庫是 React-Router ,當(dāng)然這也是官方支持的耐量。它...
    zui最煩起名字閱讀 119評論 0 0