React ·

React-router 4.0之路由配置

react-router 4.0已经发布了很长一段时间了,和3.x的API相比改动了很多地方。它遵循React的设计理念,即万物皆组件。所以 RR4 只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编程简单来讲就是你只需要关心做什么,而无需关心如何去做,好比你写 React 组件,只需要 render 出你想要的组件,至于组件是如何实现的是 React 要处理的事情。),可组合性的特点。

4.0版本本次采用单代码仓库模型架构(monorepo),这意味者这个仓库里面有若干相互独立的包,分别是:

看到这么多包我们就会想了,我们都需要引入吗?结果当然不是,只需要按需引入即可,在Recat中有react和react-dom两个包,我们都需要引入,但是路由只需要引入react-router-dom即可,这个包要比react-router丰富的,多出了 这样的 DOM 类组件

下面通过代码来看一下具体的实现效果:

本文例子采用的是browserRouer的方式,下面代码为APP.js

import React, { Component } from 'react';
import Index from './pages/index'
import {BrowserRouter as Router, Route} from 'react-router-dom'
import About from './pages/about'
import Inbox from './pages/inbox'
class App extends Component {
  constructor(){
    super();
    this.state = {
      myName:"1"
    }
  }
  render() {
    return (
       <Router>
        <div>
            <div>此处可以填写整站公用html部分(如网站菜单等)</div>
           <Route path="/" exact component={Index}></Route>
           <Route path="/about" component={About}></Route>
           <Route path="/inbox" component={Inbox}></Route>
        </div>
      </Router>
    );
  }
}

export default App;

在上面代码中,APP.js主要是起路由控制的作用,在这里配置单页面路由,不包括套用路由。如果有整站公用html部分也可以写在该组件内,或者单独写组件然后引入亦可。

路由根路径为Index组件,在进入根路径后直接显示Index组件的内容,需要在Route标签上填写exact来表示为默认路由。

再来看一下其他页面路由跳转的写法:index.js

import React,{Component} from 'react'
import {Link} from 'react-router-dom'
import logo from '../logo.svg';
import '../static/css/App.css';
export default class Index extends Component{
    constructor(){
         super();
        }
  render(){
        return (
                <h1>这里是about页面</h1>
                    <Link to="/about">about</Link>
                  </div>
    )
  }
}

在其他组件中,如果需要跳转到其他组件,只需要添加一个link标签即可,此处的link标签要跳转到的路由需要APP.js中注册。然后如果该页面需要套用路由,就需要用到下面的写法:about.js

import React,{Component} from 'react'
import Child1 from './child1'
import Child2 from './child2'
import {Link,Route,Redirect} from 'react-router-dom'
class About extends Component{
    constructor(){
        super();
        this.state = {
            myName : "这里是about页面"
        }
    }
    componentWillMount(){
    }
    render(){
        return (
            let Child1Com = null;
        if(this.props.location.pathname=='/about'){
            Child1Com = <Redirect to="/about/child1">child1</Redirect>;
        }else{
                Child1Com = <Link to="/about/child1">child1</Link>;
        }
        return (
            <div>
                {this.state.myName}
                <div>
                    <button onClick={this.showName.bind(this)}>按钮</button>
                    <Link to="/inbox">inbox</Link>
                        <div>
                        {Child1Com}
                        <Link to="/about/child2">child2</Link>
                         <Route path="/about/child1" component={Child1}/>
                         <Route path="/about/child2" component={Child2}/>
                        </div>
                </div>
            </div>
        )
    }
}
export default About

此处在about内有两个套用组件,分别为child1和child2,套用的组件需要在about组件内注册Route路由,如果希望进入后有一个默认路由,则将该路由的link修改为Redirect即可。

reac-router 4.0的简单配置暂且先说到这,后面文章会继续说明路由传参和各组件属性的问题。

参与评论