简介：React创建工程与路由

来源：互联网发布：淘宝卖家怎么关闭村淘编辑：程序博客网时间：2024/06/15 21:31

创建工程
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;

阅读全文

0 1