react路由

一、简单路由使用

1、安装

cnpm install react-router-dom --save

2、找到项目的根组件引入react-router-dom

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

3、找到官网文档根组件里面的内容进行修改（加载组件要提前引入）

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css'
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
import Content from './components/Content';
import ProductContent from './components/ProductContent';

class App extends Component {

  render() {
    return (
        <Router>
          <div>           
              <header className="title">
                <Link to="/">首页</Link>
                <Link to="/news">新闻</Link>
                <Link to="/product">商品</Link>
              </header>
               <br />
               <hr />
              <Route exact path="/" component={Home} />
              <Route path="/news" component={News} />    
              <Route path="/product" component={Product} /> 
              <Route path="/productcontent" component={ProductContent} />
              <Route path="/content/:aid" component={Content} />                 
          </div>
      </Router>
    );
  }
}

export default App;

// 引入封装好的路由
import routes from './model/router'

function App() {
    return (
        <Router>
            <div>
                <header className='title'>
                    <Link to='/'>首页组件</Link>
                    <Link to='/User'>用户组件</Link>
                    <Link to='/Shop'>商户组件</Link>
                </header>
                {/* 封装好routes直接引入遍历 */}
                {
                    routes.map((route, key) => {
                        if (route.exact) {
                            return <Route key={key} exact path={route.path} component={route.component}></Route>
                        } else {
                            return <Route key={key} path={route.path} component={route.component}></Route>
                        }
                    })
                }
                {/* 
                    未封装的路由
                    <Route exact path='/' component={Home}></Route>
                    <Route path='/User' component={User}></Route>
                    <Route path='/Shop' component={Shop}></Route> 
                */}
            </div>
        </Router>
    );
}

备注：exact表示严格匹配

二、react动态路由传参

1、动态路由配置

<Route path="/content/:aid" component={Content} />   

2、对应的动态路由加载的组件里面获取传值

this.props.match.params

跳转：

<Link to={`/content/${value.aid}`}>{value.title}</Link>

三、路由模块化及嵌套路由------直接贴代码吧

自定义路由模块

app.js页面

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css';
import routes from './model/router.js';
class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <header className="title">
            <Link to="/">首页组件</Link>
            <Link to="/user">用户页面</Link>
            <Link to="/shop">商户</Link>
            <Link to="/news">新闻</Link>
          </header>
          {/* routes是封装好的路由直接遍历 */}
          {
            routes.map((route, key) => {
              if (route.exact) {
                return <Route key={key} exact path={route.path}
                  // route.component     value.component   <User  {...props}  routes={route.routes} />
                  render={props => (
                    // pass the sub-routes down to keep nesting
                    <route.component {...props} routes={route.routes} />
                  )}
                />
              } else {
                return <Route key={key} path={route.path}
                  render={props => (
                    // pass the sub-routes down to keep nesting
                    <route.component {...props} routes={route.routes} />
                  )}
                />
              }
            })
          }
        </div>
      </Router>
    );
  }
}

export default App;

user页面的使用

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class User extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: '我是一个User组件'
        };
    }
    componentWillMount() {
        console.log(this.props.routes);
    }
    render() {
        return (
            <div className="user">
                <div className="content">
                    <div className="left">
                        <Link to="/user/">用户列表</Link><br />
                        <Link to="/user/add">增加用户</Link><br />
                        <Link to="/user/edit">编辑用户</Link>
                    </div>
                    <div className="right">
                        {
                            this.props.routes.map((route, key) => {
                                return <Route key={key} exact path={route.path} component={route.component} />
                            })
                        }
                        {/* <Route  path="/user/add" component={UserAdd} /> */}
                    </div>
                </div>
            </div>
        );
    }
}

export default User;

四、实现js路由跳转

1、引入Redirect

import {
        BrowserRouter as Router,
        Route,
        Link,
        Redirect,
        withRouter
	   } from "react-router-dom";	

2、定义一个flag

 	this.state = {  
     	 loginFlag:false
   };

3、render里面判断flag来决定是否跳转

 if (this.state.loginFlag) {
    return <Redirect to={{ pathname: '/' }} />
 }

4、要执行js跳转
通过js改变loginflag的状态
改变以后从新render 就可以通过Redirect组件来跳转

import React, { Component } from 'react';
import { Redirect } from "react-router-dom";//引入Redirect

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loginFlag: false//是否进行跳转
        };
    }
    dologin = (e) => {
        e.preventDefault();//阻止表单默认属性
        let username = this.refs.username.value;
        let password = this.refs.password.value;
        console.log(username, password);
        if (username === 'admin' && password === '123456') {
            // 登录成功     跳转到首页
            console.log(username, password)
            this.setState({
                loginFlag: true
            })
        } else {
            alert('登录失败')
        }
    }
    render() {
        // 如果loginFlag为true执行跳转
        if (this.state.loginFlag) {
            return <Redirect to={{ pathname: '/' }} />
            // return <Redirect to='/' />
        }
        return (
            <div>
                <form onSubmit={this.dologin}>
                    {/* <input type="text" value={this.state.username}/><br/><br/> */}
                    <input type="text" ref='username' /><br /><br />
                    <input type="password" ref='password' /><br /><br />
                    <input type="submit" value='执行登录' />
                </form>
            </div>
        );
    }
}
export default Login;

巴拉巴拉~~主页传送门