欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react-router-dom的使用(react框架路由)

程序员文章站 2022-07-03 15:23:46
...

一、前言

截止目前在网上搜索react路由,有react-router和react-router-dom两种,后来研究发现,后者是前者更新升级后的产物。可以用js代码来控制路由的跳转。

 官网:https://reacttraining.com/react-router/web/guides/quick-start

二、路由的使用

以下代码见github:https://github.com/hushaohhy/react-router-dom-demo

下文将从创建项目开始,到实现简单的js控制路由跳转。

1、使用create-react-app新建router-project项目

 create-react-app router-project

2、使用cnpm或npm或yarn安装react-router-dom

yarn add react-router-dom --save-dev
cnpm install react-router-dom --save-dev

3、router基础的使用参考该网址https://reacttraining.com/react-router/web/example/basic

4、以下对router进行封装,方便使用

1)项目结构

react-router-dom的使用(react框架路由)

index.js是项目的入口文件,其中定义了渲染的第一个组件是App.js因此,App.js也是入口组件。

2)router.js文件的内容

import Page1 from '../components/Page1'
import Page2 from '../components/Page2'
import Page3 from '../components/Page3'
import Page3Details from "../components/Page3Details"

let AppRouter = [
    {
        path:'/',// 首页默认加载的页面
        component:Page1,// 所使用的组件
        exact: true //是否为严格模式
    },
    {
        path:'/page2',
        component:Page2
    },
    {
        path:'/page3',
        component:Page3,
        routes:[/* * 嵌套路由并传参*/
            {
                path:'/page3/:id',
                component:Page3Details
            }
        ]
    }
]
export default AppRouter;

App.js内容

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

class App extends Component {
  render() {
    return (
        <Router>
          <div className="App">
            {
              AppRouter.map((route,key) => {
                if(route.exact) {
                  // 严格模式返回
                  return(
                      <Route exact
                             key={key}
                             path={route.path}
                             render={props => (
                                 //主要是为了传递嵌套路由到子组件
                                 //类似于 <User {...props} routes={route.routes} />
                                 <route.component {...props} routes={route.routes} />
                             )}
                      />
                  )
                }else {
                  return(
                      <Route
                          key={key}
                          path={route.path}
                          render={props => (
                              //主要是为了传递嵌套路由到子组件
                              //类似于 <User {...props} routes={route.routes} />
                              <route.component {...props} routes={route.routes} />
                          )}
                      />
                  )
                }
              })
            }
          </div>
        </Router>
    );
  }
}

export default App;

Page1.js内容

import React, { Component } from 'react';

export default class Page1 extends Component{
    goRouter(url) {
        this.props.history.push({pathname:url,state:{'day':'所传参数'}})
    }
    render() {
        return (
            <div>
                <h1>这是page1页面组件</h1>
                <button onClick={this.goRouter.bind(this,'/page2')}>goPage2</button>
            </div>
        )
    }
}

Page2.js内容

import React, { Component } from 'react';

export default class Page2 extends Component{
    constructor(props) {
        super(props)
        console.log(this.props.location.state.day)
    }
    render() {
        return (
            <div>
                <h1>这是page2页面组件{this.props.location.state.day}</h1>
            </div>
        )
    }
}

Page3.js内容这是含有子路由的写法

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

export default class Page3 extends Component{
    constructor(props) {
        super(props)
        console.log(this.props)
    }
    render() {
        let {match,routes} = this.props
        return (
            <div>
                <h1>这是page3页面组件</h1>
                <ul>
                    <li>
                        <Link to={`${match.url}/li1`}>路径是li1</Link>
                    </li>
                    <li>
                        <Link to={`${match.url}/li2`}>路径是li2</Link>
                    </li>
                </ul>
                {
                    routes.map((route,key) =>{
                        if(route.exact) {
                            return(
                                <Route exact key={key} path={route.path} component={route.component} />
                            )
                        }else {
                            return(
                                <Route key={key} path={route.path} component={route.component} />
                            )
                        }
                    })
                }
            </div>
        )
    }
}

Page3Details.js内容

import React, { Component } from 'react';

export default class Page3Details extends Component{
    render() {
        return (
            <div>
                <h1>这是page3页面的详情组件{this.props.match.params.id}</h1>
            </div>
        )
    }
}

5、以上实现了对路由的封装

三、路由中所用到的知识总结

1、js控制路由跳转

this.props.history.push({pathname:'/page2',state:{'day':'所传参数'}})

在page2页面接受所传参数

this.props.location.state.day

 

未完待续.....