手挽手带你学React入门三档,带你学会使用Reacr-router4.x,开始创建属于你的React项目
什么是React-router
React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。通俗一点就是，它帮助我们的程序在不同的url展示不同的内容。
为什么要用React-router
我们开发的时候，不可能所有的东西都展示在一张页面上，在业务场景的要求下，我们要根据不同的URL或者不同的哈希来展示不同的组件，这个我们可以称它为路由。在我们不使用React-router的时候，我们如何去做路由呢？
我在这里给大家举个例子，不使用React-router，来实现一个简单路由。
// App.js import React,{Component} from 'react' export default class App extends Component { constructor(){ super() // 我们在App.js内部来渲染不同的组件 我们这里采用哈希路由的方式，鉴于React的渲染机制，我们需要把值绑定进入state内部。 this.state={ route:window.location.hash.substr(1) } } componentDidMount() { // 这里我们通过监听的方式来监听哈希的变化，并且来更新state促进视图更新 window.addEventListener('hashchange', () => { console.log(window.location.hash.substr(1)) this.setState({ route: window.location.hash.substr(1) }) }) } render() { //在这里我们定义一个RouterView 所有的变化后的组件都会丢到这个RouterView中 let RouterView = App switch (this.state.route) { case '/children1': RouterView = Children break; case '/children2': RouterView = ChildrenTwo break; default: RouterView = Home break; } return ( <div> <h1>App</h1> <ul> <li><a href="#/children1" >children1</a></li> {/* 点击更改哈希值 这里触发我们的监听 然后修改state来触发组件的重新传染 */} <li><a href="#/children2" >children2</a></li> </ul> <RouterView/> </div> ) } } // 为了展示效果定义子组件一 class Children extends Component{ constructor(){ super() this.state={ } } render(){ return( <div> <h1>我是子组件1</h1> </div> ) } } // 为了展示效果定义子组件二 class ChildrenTwo extends Component{ constructor(){ super() this.state={ } } render(){ return( <div> <h1>我是子组件2</h1> </div> ) } } // 为了展示效果定义Home组件 class Home extends Component{ constructor(){ super() } render(){ return( <h1>我是Home</h1> ) } }
这样我们通过监听哈希变化的方式实现了我们的第一个简单路由，是不是对于路由的原理有了那么一丢丢的认识呢？接下来我们想象一个场景，这么一个路由出现了/children1/user/about/1，看到这里是不是觉得，用switch case已经蒙B了？我们接下来就要使用到React-router了，这个东西可不需要我们自己去写一大串的switch case了，并且性能啊，整洁度啊等等等方面都比我们自己写的好多了！
React-router 初体验
首先我们在React项目文件目录下执行
npm install react-router-dom --save npm install react-router --save
要想体验一个新的东西，当然是要拿自己开刀 我们改进上面我们写过的组件
// App.js import React,{Component} from 'react' // 首先我们需要导入一些组件... import { HashRouter as Router, Route, Link } from "react-router-dom"; // 这里有BrowserRouter 和 HashRouter 两种模式 我比较推荐HashRouter来学习 BrowserRouter需要后端配合 单独前端设置 刷新会出现404 // 然后我们把App组件整理干净，大概成这个样子 export default class App extends Component { constructor(){ super() this.state={ } } render() { return ( <Router> <div> <h1>App</h1> <ul> <li> <Link to="https://www.jb51.net/">Home</Link></li> <li><Link to="/children1/">children1</Link></li> <li><Link to="/children2/">children2</Link></li> </ul> <Route exact path="https://www.jb51.net/" component={Home} /> <Route path="/children1" component={Children} /> <Route path="/children2" component={ChildrenTwo} /> </div> </Router> ) } } // 为了展示效果定义子组件一 class Children extends Component{ constructor(){ super() this.state={ } } render(){ return( <div> <h1>我是子组件1</h1> </div> ) } } // 为了展示效果定义子组件二 class ChildrenTwo extends Component{ constructor(){ super() this.state={ } } render(){ return( <div> <h1>我是子组件2</h1> </div> ) } } // 为了展示效果定义Home组件 class Home extends Component{ constructor(){ super() } render(){ return( <h1>我是Home</h1> ) } }
这里我们就完成了React-router4.X的初步体验,怎么样~我给大家的第一次的感觉还可以吧~
基本组件
Routers