react學習系列2使用react-routerv4
-
問:react-router,react-router-native 和 react-router-dom 的區別
答:react-router是核心。react-router-native 和 react-router-dom是在 react-router 的基礎上針對不同執行環境做為額外補充。對於web環境使用 react-router-dom。對於開發 react-native,使用 react-router-native 即可。 -
例子:手動跳轉
路由檔案 routerMap
import React from `react`
import { BrowserRouter as Router, Route, Link, Switch } from `react-router-dom`
import Home from `../Pages/Home/`
import List from `../Pages/List/`
import Detail from `../Pages/Detail/`
import NoMatch from `./404`
// 下面幾行是老式寫法,可以忽略
// import createBrowserHistory from `history/createBrowserHistory`;
// 是個用於瀏覽器導航#的歷史物件
// const history = createBrowserHistory()
// <BrowserRouter /> 其實就是<Router history={history} />
export class RouterMap extends React.Component {
render() {
return (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/list">List</Link></li>
</ul>
<hr/>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/list" component={List} />
<Route path="/detail/:id" component={Detail} />
<Route component={NoMatch}/>
</Switch>
</div>
</Router>
);
}
}
入口檔案
import React from `react`;
import ReactDOM from `react-dom`;
import App from `./App`;
import {RouterMap} from "./Router/routerMap";
ReactDOM.render(<div>
<App />
<RouterMap />
</div>, document.getElementById(`root`));
List頁面
import React from `react`
export default class List extends React.Component {
constructor({ match }) {
super();
this.state = {
match
}
}
clickHandle(item) {
//關於history
// http://www.jianshu.com/p/e3adc9b5f75c
this.props.history.push(`/detail/` + item)
}
render() {
const arr = [1,2,3]
console.log(this.state.match)
return (
<div>
<h3>List Page</h3>
<ul>
{
arr.map((item, index) =>
<li key={index} onClick={this.clickHandle.bind(this, item)}>{item}</li>
)
}
</ul>
</div>
)
}
}
Detail 頁面
import React from `react`
export default class Detail extends React.Component {
constructor({ match }) {
super();
this.state = {
match
}
}
render() {
console.log(this.state.match)
return (
<div>Detail Page {this.state.match.params.id}</div>
)
}
}
相關文章
- react學習筆記2React筆記
- React從入門到精通學習系列之(1)安裝ReactReact
- React學習React
- 學習ReactReact
- React 深入系列2:元件分類React元件
- 機器學習導圖系列(2):概念機器學習
- 學習react教程React
- react + typescript 學習ReactTypeScript
- React開發管理後臺實踐2---React基本內容學習React
- webpack 快速構建 React 學習環境(2)-- 熱更新WebReact
- React學習(1)-create-react-appReactAPP
- react js學習手記:react 事件ReactJS事件
- Xilinx-ZYNQ7000系列-學習筆記(2):私有看門狗(AWDT)的使用筆記
- Harbor 學習分享系列2 – Harbor專案介紹
- docker學習系列2儲存對容器的修改Docker
- 個人學習系列 - Spring Boot 整合 UReport2Spring Boot
- 學習C過程中的筆記系列-2筆記
- MCMC-2|機器學習推導系列(十六)機器學習
- CSAPP英語學習系列:Chapter 2: 資料表示APPAPT
- React 學習資源React
- react 學習筆記React筆記
- React學習之HookReactHook
- React 學習之 createElementReact
- react學習筆記React筆記
- react學習目錄React
- React簡明學習React
- react 學習 問題React
- react native 包學不包會系列--認識react nativeReact Native
- react-hook-form結合antd4使用學習ReactHookORM
- JQuery學習系列jQuery
- 學習Java系列Java
- React 學習筆記【三】React筆記
- React 學習筆記【一】React筆記
- React 學習筆記【二】React筆記
- react-native 學習心得React
- React 學習之 Hello WorldReact
- React學習筆記-元件React筆記元件
- React學習筆記-JSXReact筆記JS
- React學習(九):表單React