React 專案初始化步驟
阿新 • • 發佈:2019-02-20
1.初始化基礎的專案
- npm install -g create-react-app
- create-react-app my-app
- cd my-app
- yarn start
2. 路由(React-router-dom)
2.1 React-router 和 React-router-dom
- React-router:提供了一些 router 的核心 api,包括Router、Route、Switch等,但是沒有提供 dom 操作跳轉的 api。
- React-router-dom:提供了 BrowserRouter、Route、Link 等 api,我們可以通過 dom 的事件控制路由。例如點選一個按鈕進行跳轉,大多數情況下我們是這種情況,所以在開發過程中,我們更多的是使用 React-router-dom。
# React-router-dom 安裝
yarn add react-router-dom --save
2.2 React-router-dom 核心用法
HashRouter 和 BrowserRouter:使用 HashRouter 時,導航 url 中會帶有“#”號,使用 BrowserRouter,則沒有。
HashRouter 示例程式碼如下:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App/App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter, HashRouter, Route } from 'react-router-dom' ReactDOM.render( <HashRouter> <Route path="/" component={App}></Route> </HashRouter>, document.getElementById('root') ); serviceWorker.unregister();
HashRouter 看起來是這樣的:
如果不需要這種帶“#”號的,則把程式碼位置的 【HashRouter】替換成【BrowserRouter】即可。
2.3 Route
Route:是路由的一個原材料,它控制路徑對應顯示的元件。經常用到的有 exact、path、component 屬性。
<Route exact path="/" component={Home}></Route> <Route path="/second" component={Second}></Route> <Route path="/thired" component={Thired}></Route>
- exact:控制匹配到路徑時不會繼續向下匹配。
- path:標識路由的路徑。
- component:標識路由對應的元件。
2.3 路由跳轉(Link 和 NavLink)
兩者都是可以控制路由跳轉的,不同點是 NavLink 的 api 更多,更能滿足你的需求。
Link
主要的 api 是 to,to可以接受 string 或者一個 object,來控制 url。如下:
<Link to="/courses" />
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>
NavLink
可以為當前選中的路由設定類名、樣式以及回撥函式等。使用如下:
<NavLink exact activeClassName="selected" to="/">home</NavLink>
<Route exact path='/' component={Home}></Route>
<NavLink exact activeClassName="selected" to="/second/1234">home</NavLink>
<Route path="/secord/:id" component={Second}></Route>
- exact:用於嚴格匹配,匹配到則不會向下匹配
- to:控制跳轉路徑
- activeClassName:選中狀態的類名,通過它來修改選中狀態的樣式。
match 獲取路由引數
match 是在使用 router 之後被放入 props 中的一個屬性,在class建立的元件中,通過【this.props.match】獲取 match 中的資訊。
當:
<NavLink exact activeClassName="selected" to="/text/123">home</NavLink>
<Route path="/text/:id" component={Text}></Route>
此時,match 的值如下: