简介：React创建工程与路由

创建工程 1： npm install -g create-react-app 2： create-react-app my-app（工程名字） 路由 3： 下载路由插件：react-router（版本会有问题） 4： 设置（嵌套路由）：

import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route , browserHistory } from 'react-router'; import App from './App'; import xxxfrom './components/xxx/xxx'; import xxxfrom './components/xxx/xxx'; import xxxfrom './components/xxx/xxx'; import xxxfrom './components/xxx/xxx'; import xxxfrom './components/xxx/xxx'; import xxxfrom './components/xxx/xxx'; import './components/styles/index.css'; import './components/styles/App.css'; const router = ( <Router history={browserHistory} > <Route path='/' component={KaiPian}/> <Route path='/Home' component={App}> <Route path='/xxx' component={xxx}/> <Route path='/xxx' component={xxx}/> <Route path='/xxx' component={xxx}/> <Route path='/xxx' component={xxx}/> <Route path='/xxx' component={xxx}/> </Route> </Router> ) ReactDOM.render(router, document.getElementById('root'));

5： 在对应的JS下设置跳转：Link to=”/xxx”>xxx

import React, { Component } from 'react'; //引入路由插件 import {browserHistory, Link} from 'react-router' class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <h2>xxx-React</h2> </div> <div className="App-From" style={{width: '12%'}}> <p className="App-intro"> <Link to="/xxx">xxx</Link> </p> <p className="App-intro"> <Link to="/xxx">xxx</Link> </p> <p className="App-intro"> <Link to="/xxx">xxx</Link> </p> <p className="App-intro"> <Link to="/xxx">xxx</Link> </p> <p className="App-intro"> <Link to="/xxx">xxx</Link> </p> </div> <div style={{float: 'right',width: '85%',height: '100%',backgroundColor: '#ebeff2'}}> {React.cloneElement(this.props.children, this.props)} </div> </div> ); } } export default App;