React 腳手架介紹以及路由基本資訊

阿新 • • 發佈：2019-01-22

create-react-app建立專案

npm install -g create-react-app
create-react-app react-cli

目錄結構介紹

圖中紅色框是我後來加的，暫時可以不考慮。

public：裡面包含了我們專案中的啟動頁面，react比較適合單頁面專案應用開發。

favico.ico: 這是用來表示：快捷方式小圖示。詳情可以訪問文章
index.html: 初始頁面。
manifest.json: wepack打包優化相關，本人沒有研究過。

src：裡面包含專案檔案，最重要的是下面兩個檔案

index.js 專案初始執行的js。內部進行頁面元素的渲染操作。
App.js index.js初始載入的元件。

至於為什麼初始載入的index.html和index.js。我們可以將專案中的配置檔案顯示出來

在當前目錄下執行下面程式碼：

npm run eject //必須在當前本地沒有code change的情況下去執行，不然可能會報錯，因為我在用的時候就報錯了。

然後我們會看到目錄結構發生變化：

如圖兩個紅色框都是新加的。不過目前我最關心的是path.js。下面是部分程式碼：

module.exports = {
  dotenv: resolveApp('.env'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};

如圖可以看出為什麼index.html和index.js是初始執行檔案。

路由例子

提出路由問題

單頁面應用上的hash值變化會導致頁面上渲染上不同的elements。

第一需要監控hash值的變化。

第二hash值的變化需要引起當前主元件內的state變化。（這一點相信不難理解，可以訪問前一篇文章）。

不使用React Router

//index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

//App.js
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import About from "./containers/about";
import Inbox from "./containers/inbox";
import Home from "./containers/home";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {route: window.location.hash.substr(1)};
    }

    componentDidMount() {
        window.addEventListener('hashchange', () => { //監控hash值的變化
            this.setState({
                route: window.location.hash.substr(1) //更新state值
            })
        })
    }

    render() {
        let Child
        switch (this.state.route) { //判斷state值，渲染不同的元件
            case '/about':
                Child = About;
                break;
            case '/inbox':
                Child = Inbox;
                break;
            default:
                Child = Home;
        }

        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><a href="#/about">About</a></li>
                    <li><a href="#/inbox">Inbox</a></li>
                    <li><a href="#/home">Home</a></li>
                </ul>
                <Child/>
            </div>
        )
    }
}

export default App;

// containers/about.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class About extends Component {
    render() {
        return (
            <div>About</div>
        );
    }
}

export default About;


// containers/home.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Home extends Component {
    render() {
        return (
            <div>Home</div>
        );
    }
}

export default Home;


// containers/inbox.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Inbox extends Component {
    render() {
        return (
            <div>Inbox</div>
        );
    }
}

export default Inbox;

React-Route

React Router 是一個基於 React 之上的強大路由庫，它可以讓你嚮應用中快速地新增檢視和資料流，同時保持頁面與 URL 間的同步。

npm install [email protected] --save

此處說明一下：因為當前的react版本是16.3.2，因為react16的不能相容 react-router 2/3，如果要用 react-router2/3,需將react降級到15，所以我這裡用的[email protected]，[email protected]。

舉例：

import React from 'react';
import ReactDOM from 'react-dom'
import { Router, Route, Link } from "react-router";
import './index.css';

const App = React.createClass({
    render() {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/inbox">Inbox</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
})

const About = React.createClass({
    render() {
        return <h3>About</h3>
    }
})

const Inbox = React.createClass({
    render() {
        return (
            <div>
                <h2>Inbox</h2>
                {this.props.children || "Welcome to your Inbox"}
            </div>
        )
    }
})

const Message = React.createClass({
    render() {
        return <h3>Message {this.props.params.id}</h3>
    }
})

ReactDOM.render((
    <Router>
        <Route path="/" component={App}>
            <Route path="about" component={About} />
            <Route path="inbox" component={Inbox}>
                <Route path="messages/:id" component={Message} />
            </Route>
        </Route>
    </Router>
), document.getElementById('root'))

路由基本配置

ReactDOM.render((
    <Router>
        <Route path="/" component={App}>
            <Route path="about" component={About} />
            <Route path="inbox" component={Inbox}>
                <Route path="messages/:id" component={Message} />
            </Route>
        </Route>
    </Router>
), document.getElementById('root'))；

Router

React Router 的重要元件。它能保持UI和URL的同步，其內部包含多個路由。

children (required)

一個或多個的 Route 或 PlainRoute。當 history 改變時， <Router> 會匹配出 Route 的一個分支，並且渲染這個分支中配置的元件，渲染時保持父 route 元件巢狀子 route 元件。

routes
children 的別名。

const routes = (<Route path="/" component={App}>
    <Route path="about" component={About}/>
    <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message}/>
    </Route>
</Route>);

ReactDOM.render((
    <Router children={routes} routes={routes}>

    </Router>
), document.getElementById('root'))

對於children和routes之間的區別沒有研究過，<Router children={routes} routes={routes}>二者任意一個存在，路由都可以執行。還有其他的props，這種就需要自己拓展了。

Route

Route 是用於宣告路由對映到應用程式的元件層。

<Route path="/" component={App}>
    <Route path="about" component={About} />
    <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
    </Route>
</Route>

path
URL 中的路徑。它會以父元件路由為基礎，除非它是從/開始的，將它變成一個絕對路徑。
父子元件如何判斷，可以看出<Route></Route>內部的Route元件都是可能出現的子元件。

<Route path="/App" component={App}>
    <Route path="about" component={About} />
    <Route path="/inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
    </Route>
</Route>

這個例子中中，/App/about可以訪問到About元件，但是/App/inbox訪問不到InBox元件。因為路由path以/開頭。

component
當匹配到URL時，單個的元件會被渲染。它可以被父route 元件的this.props.children渲染。這個知識點很重要，因為父子元件通過路由渲染的過程中，是需要一個地方渲染對應元件內容。所以每個父元件都會設定this.props.children來劃定一個渲染子元件的區域。

const App = React.createClass({
    render() {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/inbox">Inbox</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
})

components
Route 可以定義一個或多個已命名的元件，當路徑匹配到 URL 時，它們作為 name:component 對的一個物件去渲染。它們可以被父route元件的this.props[name] 渲染。
這裡的含義是：子路由的變化會導致父元件的多處變化。下面例子是父元件中有兩塊不相接的區域會隨著路由的變化而變化。這裡其實將子元件按照路由的變化然後傳入到父元件的props中。

import React from 'react';
import ReactDOM from 'react-dom'
import {Router, Route, Link} from "react-router";
import './index.css';

const App = React.createClass({
    render() {
        const { main, sidebar } = this.props
        return (
            <div>
                <h1>App</h1>
                <div className="Main">
                    {main}
                </div>
                <ul>
                    <li><Link to="/groups">groups</Link></li>
                    <li><Link to="/users">users</Link></li>
                </ul>
                <div>
                    <div className="Sidebar">
                        {sidebar}
                    </div>
                </div>
            </div>
        )
    }
})

const Groups = React.createClass({
    render() {
        return <h3>Groups</h3>
    }
})

const GroupsSidebar = React.createClass({
    render() {
        return (
            <div>
                <h2>GroupsSidebar</h2>
            </div>
        )
    }
})

const Users = React.createClass({
    render() {
        return <h3>Users</h3>
    }
})

const UsersSidebar = React.createClass({
    render() {
        return (
            <div>
                <h2>UsersSidebar</h2>
                <h3>{this.props.children}</h3>
            </div>
        )
    }
})

const Profile = React.createClass({
    render() {
        return (
            <div>
                <h2>Profile {this.props.params.id}</h2>
            </div>
        )
    }
})

const routes = (
    <Route path='/' component={App}>
        <Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}}/>
        <Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
            <Route path="users/:userId" component={Profile}/>
        </Route>
    </Route>
)

ReactDOM.render((
    <Router children={routes}>
    </Router>
), document.getElementById('root'))

Link

允許使用者瀏覽應用的主要方式。<Link> 以適當的 href 去渲染一個可訪問的錨標籤。
<Link> 可以知道哪個 route 的連結是啟用狀態的，並可以自動為該連結新增 activeClassName 或 activeStyle。
to
跳轉連結的路徑，如 /users/123。
query
已經轉化成字串的鍵值對的物件。
hash
URL 的 hash 值，如 #a-hash。
注意：React Router 目前還不能管理滾動條的位置，並且不會自動滾動到 hash 對應的元素上。如果需要管理滾動條位置，可以使用 scroll-behavior 這個庫。
state
儲存在 location 中的 state。
activeClassName
當某個 route 是啟用狀態時，<Link> 可以接收傳入的 className。失活狀態下是預設的 class。
activeStyle
當某個 route 是啟用狀態時，可以將樣式新增到連結元素上。

新增首頁

首頁就是父元件初始渲染的頁面，也可以說是父元件的預設渲染頁面，使用 IndexRoute 來設定一個預設頁面。IndexRoute對應的元件將會渲染到App中的this.props.children處。

<Route path="/" component={App}>
    <IndexRoute component={Dashboard} />
    <Route path="about" component={About}/>
    <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message}/>
    </Route>
</Route>

頁面跳轉

當我們修改了url之後，如下訪問messages/1的路由從/inbox/messages/:id -> /messages/:id，這個時候為了相容舊的url，則需要使用Redirect：

<Route path="/" component={App}>
    <IndexRoute component={Dashboard} />
    <Route path="about" component={About}/>
    <Route path="inbox" component={Inbox}>
        <Route path="/messages/:id" component={Message}/>
        <Redirect from="messages/:id" to="/messages/:id" />
    </Route>
</Route>

進入和離開的Hook

Route 可以定義 onEnter 和 onLeave 兩個 hook ，這些hook會在頁面跳轉確認時觸發一次。這些 hook 對於一些情況非常的有用，例如許可權驗證或者在路由跳轉前將一些資料持久化儲存起來。但是下面例子中我的測試，二者不不能共存，如果二者同時存在，onLeave沒有作用。

import React from 'react';
import ReactDOM from 'react-dom'
import {Router, Route, Link} from "react-router";
import './index.css';
import IndexRoute from "react-router/es6/IndexRoute";
import Redirect from "react-router/es6/Redirect";

const App = React.createClass({
    render() {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/inbox">Inbox</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
})

const About = React.createClass({
    render() {
        return <h3>About</h3>
    }
})

const Inbox = React.createClass({
    render() {
        return (
            <div>
                <h2>Inbox</h2>
                {this.props.children || "Welcome to your Inbox"}
            </div>
        )
    }
})

const Message = React.createClass({
    render() {
        return <h3>Message {this.props.params.id}</h3>
    }
})

const Dashboard = React.createClass({
    render() {
        return <h3>Hello!</h3>
    }
})

 const EnterHook = function(RouterState, RedirectFunction, callback) {
    console.log("進入about");
}

const LeaveHook = function(RouterState) {
    console.log("離開about");
}

const routes = (
    <Route path="/" component={App}>
        <IndexRoute component={Dashboard} />
        <Route path="about" onLeave={LeaveHook} onEnter={EnterHook}  component={About}/>
        <Route path="inbox" component={Inbox}>
            <Route path="/messages/:id" component={Message}/>
            <Redirect from="messages/:id" to="/messages/:id" />
        </Route>
    </Route>);

ReactDOM.render((
    <Router children={routes}>
    </Router>
), document.getElementById('root'))

替換的配置方式

因為 route 一般被巢狀使用，所以使用 JSX 這種天然具有簡潔巢狀型語法的結構來描述它們的關係非常方便。然而，如果你不想使用 JSX，也可以直接使用原生 route 陣列物件。

const routes = [
    { path: '/',
        component: App,
        indexRoute: { component: Dashboard },
        childRoutes: [
            { path: 'about', component: About },
            { path: 'inbox',
                component: Inbox,
                childRoutes: [
                    { path: '/messages/:id', component: Message }
                ]
            }
        ]
    }
]

路由匹配

<Route path="/hello/:name">         // matches /hello/michael and /hello/ryan
<Route path="/hello(/:name)">       // matches /hello, /hello/michael, and /hello/ryan
<Route path="/files/*.*">           // matches /files/hello.jpg and /files/hello.html
<Route path="/**/*.jpg">            // matches /files/hello.jpg and /files/path/to/file.jpg

Index Links

IndexLink的意義在於只有當前的路由匹配的情況下才會顯示啟用狀態，下面舉個例子：路由匹配到/inbox，此時下面第一個和第三個link都顯示已啟用。但是第二個不會，因為當前的路由是/inbox，不是/。只有當路由為/，第二個link才會啟用。

<ul>
    <li><Link activeClassName='active' to="/">About</Link></li>
    <li><IndexLink activeClassName='active' to="/">About</IndexLink></li>
    <li><Link activeClassName='active' to="/inbox">Inbox</Link></li>
</ul>

browserHistory

React Router 是建立在 history 之上的。簡而言之，一個 history 知道如何去監聽瀏覽器位址列的變化，並解析這個 URL 轉化為 location 物件，然後 router 使用它匹配到路由，最後正確地渲染對應的元件。

常用的 history 有三種形式，但是你也可以使用 React Router 實現自定義的 history。

browserHistory
hashHistory

createMemoryHistory

在我沒有使用任何的方式的情況下，路由形如下面：

http://localhost:3000/inbox#/?_k=iawvme

然後修改程式碼如下，加上history={browserHistory}

<Router history={browserHistory} children={routeConfig}>

路由變化就是：http://localhost:3000/inbox

動態路由

React Router 裡的路徑匹配以及元件載入都是非同步完成的，不僅允許你延遲載入元件，並且可以延遲載入路由配置。在首次載入包中你只需要有一個路徑定義，路由會自動解析剩下的路徑。
Route 可以定義 getChildRoutes，getIndexRoute 和 getComponents 這幾個函式。它們都是非同步執行，並且只有在需要時才被呼叫。我們將這種方式稱之為 “逐漸匹配”。 React Router 會逐漸的匹配 URL 並只加載該 URL 對應頁面所需的路徑配置和元件。

const CourseRoute = {
  path: 'course/:courseId',

  getChildRoutes(location, callback) {
    require.ensure([], function (require) {
      callback(null, [
        require('./routes/Announcements'),
        require('./routes/Assignments'),
        require('./routes/Grades'),
      ])
    })
  },

  getIndexRoute(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Index'))
    })
  },

  getComponents(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Course'))
    })
  }
}

這裡的思想很簡單，我們來類比一下：

const routeConfig = [
    { path: '/',
        component: App,
        indexRoute: { component: Dashboard },
        childRoutes: [
            { path: 'about', component: About },
            { path: 'inbox',
                component: Inbox,
                childRoutes: [
                    { path: '/messages/:id', component: Message }
                ]
            }
        ]
    }
]

我們以/為例：getChildRoutes方法回去訪問子路由的檔案，首先說明這裡的子路由檔案是一個路由，不是一個簡單的元件。子路由檔案的格式和上面的類似，也可能會有這幾個方法。另外兩個方法訪問的就是具體的元件了。

跳轉前確認

React Router 提供一個 routerWillLeave 生命週期鉤子，這使得 React 元件可以攔截正在發生的跳轉，或在離開 route 前提示使用者。routerWillLeave 返回值有以下兩種：

return false 取消此次跳轉

return 返回提示資訊，在離開 route 前提示使用者進行確認。

需要先引入mixins: [ Lifecycle ]

const About = React.createClass({
    mixins: [ Lifecycle ],

    routerWillLeave(nextLocation) {
        return 'Your work is not saved! Are you sure you want to leave?'
    },

    render() {
        return <h3>About</h3>
    }
})

獲取路由引數

元件的生命週期內我們可以通過this.props.params獲取到。

寫在最後：react 路由知識還有許多東西需要探索，但是可以先了解基本知識再去拓展，對於版本的升級可以上網簡單搜尋一下，應該就可以解決了。最後吐槽一下react的生態圈真的不如angular。