本文介紹了react路由配置，最近剛開始學(xué)，分享給大家，順便給自己留個(gè)筆記。
包含了LInk跳轉(zhuǎn)以及js觸發(fā)跳轉(zhuǎn)并傳參。
這是項(xiàng)目的目錄結(jié)構(gòu)，主要的代碼都在src目錄下，src下面新建一個(gè)containers文件夾放我們的一些組件，router文件夾是配置路由用的。
按照順序來寫：detail文件夾下的代碼
import React from 'react' class Detail extends React.Component { render() { return ( <p>Detail，url參數(shù)：{this.props.params.id}</p> ) } } export default Detail home：
import React from 'react' import { Link } from 'react-router' class Home extends React.Component { render() { return ( <div> <p>Home</p> <Link to="/list">to list</Link> </div> ) } } export default Home list：
import React from 'react' import { hashHistory } from 'react-router' class List extends React.Component { render() { const arr = [1, 2, 3] return ( <ul> {arr.map((item, index) => { return <li key={index} onClick={this.clickHandler.bind(this, item)}>js jump to {item}</li> })} </ul> ) } clickHandler(value) { hashHistory.push('/detail/' + value) } } export default List 404yemian：
import React from 'react' class NotFound extends React.Component { render() { return ( <p>404 NotFound</p> ) } } export default NotFound 在containers下面有一個(gè)app.jsx總?cè)肟谖募?/p>
import React from 'react' class App extends React.Component { render() { return ( <div>{this.props.children}</div> ) } } export default App router文件夾下的：
import React from 'react' import { Router, Route, IndexRoute } from 'react-router' import App from '../containers/App' import Home from '../containers/Home' import List from '../containers/List' import Detail from '../containers/Detail' import NotFound from '../containers/NotFound' class RouteMap extends React.Component { updateHandle() { console.log('每次router變化之后都會(huì)觸發(fā)') } render() { return ( <Router history={this.props.history} onUpdate={this.updateHandle.bind(this)}> <Route path='/' component={App}> <IndexRoute component={Home}/> <Route path='list' component={List}/> <Route path='detail/:id' component={Detail}/> <Route path="*" component={NotFound}/> </Route> </Router> ) } } export default RouteMap 最終最外層的index.js：
import React from 'react' import { render } from 'react-dom' import { hashHistory } from 'react-router' import RouteMap from './src/router/routeMap' render( <RouteMap history={hashHistory}/>, document.getElementById('App') ) 使用的router版本是^2.8.1，如果下載的是4.0以上的版本，那么寫法就和現(xiàn)在的幾乎是完全不一樣，他做了很大的改動(dòng)，配置的時(shí)候注意router的版本號(hào)。
項(xiàng)目地址https://github.com/wineSu/myReact/tree/master/src/containers
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
