React-Router的使用


使用 react-router 还是 react-router-dom ?

React-router

  • React Router 包含3个库, react-router、react-router-dom、和 react-router-native。react-router 提供最基本的路由功能,实际使用,我们不会直接安装 react-router,而是根据应用运行的环境选择安装 react-router-dom(在浏览器中使用)或 react-router-native(在 react-native中使用)。react-router-dom 和 react-router-native 都依赖 react-router,所以在安装时, react-router 也会自动安装。
  • 两者的关系
    • react-router:提供 router 的核心api。如 Router、Route、Switch 等,没有提供有关dom操作进行路由跳转的api
    • react-router-dom:提供 BrowserRouter、Route、Link等api,可以通过dom操作控制路由
    • react-router-dom:基于 react-router,加入了在浏览器运行环境下的一些功能,例如:Link 组件,会渲染一个 a 标签,Link 组件源码a标签行; BrowserRouter和HashRouter 组件,前者使用 pushState 和 popState 事件构建路由,后者使用 window.location.hash 和 hashchange 事件构建路由。
    • react-router-dom 里包含了 react-router 的依赖,因此只需要安装后者即可

      使用

      npm i react-router-dom
      // or
      yarn add react-router-dom
  • 简易使用示例
  1. 新建一个 router/index.js 文件
    //  router/index.js
    import React from 'react'
    
    // 引入一些模块
    import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
    
    //引入需要用到的页面组件 
    import Home from './../views/home/home'
    import About from './../views/about/about'
    
    function router() {
      return (
        // Route 路由
        // Redirect 重定向
        <Router>
          <Route path="/home" component={Home} />
          <Route path="/" render={
            () => <Redirect to="/home" />}>
          </Route>
          <Route path="/about" component={About}></Route>
        </Router>
      )
    }
    export default router
  2. home组件
    //home.js
    import React, { Component } from 'react';
    import { Link } from 'react-router-dom'
    
    export default class Home extends Component {
      render() {
        // Link 路由跳转
        return (
          <div>
            <ul>
              <li><Link to="/home">Home</Link></li>
              <li><Link to="/about">About</Link></li>
            </ul>
            <h1>home</h1>
          </div>
        )
      }
    }
  3. about组件
    //about.js
    import React, { Component } from 'react';
    import { Link } from 'react-router-dom'
    
    export default class About extends Component {
      render() {
        // Link 路由跳转
        return (
          <div>
            <ul>
              <li><Link to="/home">Home</Link></li>
              <li><Link to="/about">About</Link></li>
            </ul>
            <h1>about</h1>
          </div>
        )
      }
    }
  4. app.js中引入router
    import React, { Component } from 'react';
    import Router from './router'
    
    export default class App extends Component  {
      render(){
        return (
          <div>
            <Router />
          </div>
        )
      }
    }
  5. 嵌套路由
    // about.js
    import React, { Component } from 'react';
    import { Link } from 'react-router-dom'
    export default class About extends Component {
      render() {
        return (
          // {this.props.children}  ==> 显示嵌套路由
          <div>
            <ul>
              <li><Link to="/home">Home</Link></li>
              <li><Link to="/about">About</Link></li>
            </ul>
            <h1>about</h1>
            {this.props.children}
          </div>
        )
      }
    }
    //  router/index.js
    import React from 'react'
    import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
    import Home from './../views/home/home'
    import About from './../views/about/about'
    import somePage from './../views/somePage/somePage'
    function router() {
      return (
        <Router>
          <Route path="/home" component={Home} />
          <Route path="/" render={
            () => <Redirect to="/home" />}>
          </Route>
          <Route path="/about" render={()=>(
              <About>
                <Route path="/about/somePage" component={somePage} />
              </About>
            )}>
          </Route>
        </Router>
      )
    }
    export default router

文章作者: Damao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Damao !
  目录