4 react-router_react-router4 - CSDN
  • react-router升级4以后有许多的更改,在web端使用的router改为了 react-router-dom,其整个设计思想也更加符合组件化的思想,一切都是组件!所以路由的嵌套也和之前有了较大的变化,react-router-dom的路由嵌套有两种...

    在这里插入图片描述

    前言

    react-router升级4以后有许多的更改,在web端使用的router改为了 react-router-dom,其整个设计思想也更加符合组件化的思想,一切都是组件!所以路由的嵌套也和之前有了较大的变化,react-router-dom的路由嵌套有两种方式。
    原文地址:Liang的博客

    路由嵌套

    1.在组件中需要嵌套路由的地方直接使用Route标签书写路由

    /*router.js*/
    
    import React, { Component } from 'react'
    import { BrowserRouter  as Router, Route, Switch} from 'react-router-dom'
    import Home from './pages/home';
    
    export default class Routers extends Component {
      render() {
        return (
          <Router>
            <App>
              <Switch>
                <Route path="/home" exact component={Home}></Route>
              </Switch>
            </App>
          </Router>
        )
      }
    }
    
    /*Home组件*/
    
    import React, { Component } from 'react'
    import { Route, Switch} from 'react-router-dom'
    import Menu from './pages/Menu';
    
    export default class Routers extends Component {
      render() {
        return (
          <div>
            <Route path="/home/menu" component={Menu}></Route>
          </div>
        )
      }
    }
    

    2.使用render函数直接嵌套路由

    /*router.js*/
    
    import React, { Component } from 'react'
    import { BrowserRouter  as Router, Route, Switch} from 'react-router-dom'
    import Home from './pages/home';
    import Menu from './pages/Menu';
    
    export default class Routers extends Component {
      render() {
        return (
          <Router>
            <App>
              <Switch>
                <Route path="/home" render={()=>
                    <Menu>
                        <Route path="/home/menu" component={Menu}></Route>
                    <Menu/>
                }></Route>
              </Switch>
            </App>
          </Router>
        )
      }
    }
    

    路由动态传值

    路由的传值是通过 react-router中的match对象获取的,具体方法如下:

    /*router.js*/
    
    import React, { Component } from 'react'
    import { BrowserRouter  as Router, Route, Switch} from 'react-router-dom'
    import Menu from './pages/menu';
    import Item1 from './pages/menu/item1';
    import Item2 from './pages/menu/item2';
    
    export default class Routers extends Component {
      render() {
        return (
          <Router>
            <App>
              <Switch>
                <Route path="/menu" render={()=>
                    <Menu>
                        <Route path="/menu/item1/:id" component={Item1}></Route>
                   		<Route path="/menu/item2/:id" component={Item2}></Route>
                    <Menu/>
                }></Route>
              </Switch>
            </App>
          </Router>
        )
      }
    }
    
    /* Menu组件 */
    import React, { Component } from 'react'
    import { Link } from 'react-router-dom'
    
    export default class Menu extends Component {
      render() {
        return (
          <div>
            <Link to="/menu/item1/123">item1</Link> <br/>
            <Link to="/menu/item2/456">item2</Link>
            <hr/>
            {this.props.children}
          </div>
        )
      }
    }
    
    
    /* Item1组件 */
    import React, { Component } from 'react'
    
    export default class Item1 extends Component {
      render() {
        return (
          <div>
            this is Item1 page;
            {this.props.match.params.id}  
          </div>
        )
      }
    }
    
    
    展开全文
  • React-Router是基于React之上的一个强大的路由库,使用它你可以快速的添加视图和数据流到你的应用中,并保持页面和URL的同步。 React-Router3的配置使用: package,json { "name": "React-...

    React-Router是基于React之上的一个强大的路由库,使用它你可以快速的添加视图和数据流到你的应用中,并保持页面和URL的同步。

    React-Router3的配置使用:

    package,json

    {
      "name": "React-webpack-server",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "build": "./node_modules/.bin/webpack",
        "start": "node server.js"
      },
      "dependencies": {
        "@types/react": "^16.3.14",
        "@types/react-dom": "^16.0.5",
        "@types/react-router": "^3.0.15",
        "express": "^4.16.3",
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "react-router": "^3.2.1",
        "ts-loader": "^3.5.0",
        "typescript": "^2.6.2",
        "webpack": "^3.12.0",
        "webpack-dev-middleware": "^2.0.6",
        "webpack-hot-middleware": "^2.22.2"
      }
    }

    react-router3的路由配置

    import * as React from 'react';
    import { Route, IndexRoute } from 'react-router';
    import Wrapper from "./components/Wrapper";
    import App from "./components/App";
    import Home from "./components/Home";
    export const routes = (
        <Route>
            <Route path="/" component={Wrapper}>
                <IndexRoute component={App} />
                <Route path="home" component={Home} />
                {//你可以在这里继续添加自己的路由信息}
            </Route>
        </Route>
    )

    React入口配置文件

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import Root from "./Root";
    ReactDOM.render(<Root />, document.getElementById("root"))

    Root.tsx配置, 这里是使用的基于hash的路由导航,你也可以使用browserHistory的路由

    import * as React from 'react';
    import { Router, hashHistory } from 'react-router';
    import { routes} from "./Routes";
    class Root extends React.Component<any, any>{
        constructor(props: any) {
            super(props)
        }
        render() {
            return <Router history={hashHistory} routes={routes} />
        }
    }
    export default Root;

    完整代码请参考 React-Router3

    React-Router4的配置使用:

    import * as React from 'react';
    import { Route, HashRouter, Switch } from 'react-router-dom';
    import Wrapper from "./components/Wrapper";
    import App from "./components/App";
    import Home from "./components/Home";
    class Root extends React.Component<any, any>{
        constructor(props: any) {
            super(props)
        }
        render() {
            return (
                <HashRouter>
                {//这里的div包裹是必须要有的,不然会报错( A <Router> may have only one child element) 
                //这里你也可以使用一个组件包裹Route信息 如 Wrapper
            }
                    <div>{//<Wrapper>}
                    {//这里的exact必须要加,不然APP组件和HOME组件都会被渲染出来,加上exact只会渲染匹配的path对应的组件}
                    {//<Switch>}
                        <Route exact path="/" component={App} />
                        <Route  path="/home" component={Home} />
                        { //如果需要“未找到”的路由可以使用如下 ,但是这样的就需要使用Switch组件将所有Route组件包裹起开,不然渲染的匹配组件的时候会将 NoMatch组件一起渲染出来}
                        <Route component={NoMatch} />
                        {//</Switch>}
                    </div>
                    {//</Wrapper>}
                </HashRouter>
            )
        }
    }
    export default Root;

    Wrapper.tsx组件

    import * as React from 'react';
    class Wrapper extends React.Component<any, any>{
        constructor(props: any) {
            super(props)
        }
        render() {
            return <div className="wrapper-component">{this.props.children}</div>
        }
    }
    export default Wrapper;

    入口文件 index.tsx

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import Root from "./Root";
    ReactDOM.render(<Root />, document.getElementById("root"))

    完整代码请参考 React-Router4

    展开全文
  • 前言 Hooks大行天下之后,关于如何使用 Hooks,如何替代Redux实现状态...其实React-Router4.0版本已经是一两年前的产品了,作者发布4.X时候也明确说过,除非React有重大更新,不然他们不会过多改动React-Router的实...

    前言

    Hooks大行天下之后,关于如何使用 Hooks,如何替代Redux实现状态管理等文章甚嚣尘上,甚至介绍Redux-Hooks实现的文章也有很多,唯独少了全家桶三件套之一的React-Router的Hooks方法,让人有点惊异。其实React-Router4.0版本已经是一两年前的产品了,作者发布4.X时候也明确说过,除非React有重大更新,不然他们不会过多改动React-Router的实现,Hooks可以说让他们有一种好久不见的感觉。

    5.1版本的React-Router,带来了useHistory,useLocation,useParams,useRouteMatch四个钩子函数。

    useParams

    这个函数什么用呢?首先我们看一个不适用hooks读取路由params的方法:

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
    
    function BlogPost({ match }) {
      let { slug } = match.params;
      return <div>{slug}</div>;
    }
    
    ReactDOM.render(
      <Router>
        <div>
          <Switch>
            <Route path="/blog/:slug" component={BlogPost} />
          </Switch>
        </div>
      </Router>,
      document.getElementById("root")
    );
    

    可以看到,我们必须使用match来获取路由中的params。

    那么如果使用useParams怎么做呢?

    import React from "react";
    import ReactDOM from "react-dom";
    import {
      BrowserRouter as Router,
      Route,
      Switch,
      useParams
    } from "react-router-dom";
    
    function BlogPost() {
      let { slug } = useParams();
      return <div>{slug}</div>;
    }
    
    ReactDOM.render(
      <Router>
        <div>
          <Switch>
            <Route path="/blog/:slug">
              <BlogPost />
            </Route>
          </Switch>
        </div>
      </Router>,
      document.getElementById("root")
    );
    

    在Route中我们可以不用写烦人的component了,只要记得用把页面包裹起来就行了,同时useParams的组件中也不用再写{match}了。

    同时嵌套路由也变得更加简单了,我们如果需要两个params参数的话,只要在useParams中传递结构得到两个参数即可。

    useLocation

    这个钩子函数顾名思义,可以查看当前路由:

    function BlogPost() {
      const { slug } = useParams();
      const location = useLocation();
      console.log(location);
      return <div>{slug}</div>;
    }
    

    控制台会输出:

    Object {pathname: "/blog/4", search: "", hash: "", state: undefined}
    pathname: "/blog/4"
    search: ""
    hash: ""
    state: undefined
    

    一般和useEffect一起用,大家自己思考业务场景吧。

    useHistory

    这个API还会大改,只是useNavigate的一个雏形,也是很好理解,可以返回上一个网页:

    function BackButton() {
      let history = useHistory();
      return (
        <>
          <button type="button" onClick={() => history.push("/blog/1")}>
            123
          </button>
          <button type="button" onClick={() => history.goBack()}>
            回去
          </button>
        </>
      );
    }
    

    useRouteMatch

    官方给了这个例子,是把match提出去让整个代码看起来更加有序,使用这个钩子函数可以让你匹配最接近route树的路由,不过我个人没有使用过,不清楚这个,等以后接触了再来补充。

    // before
    import { Route } from 'react-router-dom'
    
    function App() {
      return (
        <div>
          {/* ... */}
          <Route
            path="/BLOG/:slug/"
            strict
            sensitive
            render={({ match }) => {
              return match ? <BlogPost match={match} /> : <NotFound />
            }}
          />
        </div>
      )
    }
    
    // after
    import { useRouteMatch } from 'react-router-dom'
    
    function App() {
      let match = useRouteMatch({
        path: '/BLOG/:slug/',
        strict: true,
        sensitive: true
      })
    
      return (
        <div>
          {/* ... */}
          {match ? <BlogPost match={match} /> : <NotFound />}
        </div>
      )
    }
    
    展开全文
  • router的时候我首先就是先在react-router的官网上去看她的官方文档,然后按照上面的教程来在自己的react工程中使用react-router,但是基本应该会遇到问题,原因就是我们在使用npm安装react-router的时候基本是4.x...

    在这里先介绍一个比较难以描述的坑

    在使用react-router的时候我首先就是先在react-router的官网上去看她的官方文档,然后按照上面的教程来在自己的react工程中使用react-router,但是基本应该会遇到问题,原因就是我们在使用npm安装react-router的时候基本是4.x版本,由于版本的问题有一些我们之前在其他人的项目中看见的一些属性没法使用,其实是由于官网上的教程一些是按照版本2.x来编写的,我们需要做一些修改,使用4.x版本后我们需要的依赖是react-router-dom,而不是react-router

    然后在描述一下碰到的路径匹配的问题:

    ReactDom.render(
        <HashRouter>
            <Switch>
                <Route path = '/' component={App} />
                <Route path = '/PageA' component={PageA} />
                <Route path = '/PageB' component={PageB} />
            </Switch>
        </HashRouter>, document.getElementById('root'));

    实际的效果:

    /

    PageA

    可以发现就算改变了路径上对应的hash值,但是还是一直渲染的是App组件

    由此还会引发一个问题,就是如果我在path='/'路径中对于的App组件中添加一个<Link to = ' /PageA',然后我们进入路径'/PageA'中,显示的页面就是App组件,然后点击改Link然后跳转,console就会提示Warning: Hash history cannot PUSH the same path; xxxx;这个时候说明路径也是改变了,但是渲染的还是App组件

    这个的原因就是由于我们在使用route的时候匹配路径的规则是模糊的,类似与正则匹配的贪婪匹配,所以为了避免这中情况,我们需要使用准确的匹配规则,这个时候就需要使用到route的两个属性了

    直接把官方解释沾上;

    exact strict

    官方给的解释比较具体了,自述一遍就是:

    exact属性为true时路径中的hash值必须和path完全一致才渲染对应的组件,如果为false则'/'也可以匹配'/xxx';(如果strict属性为false,则末尾是否包含反斜杠结尾不影响匹配结果)

    strict属性主要就是匹配反斜杠,规定是否匹配末尾包含反斜杠的路径,如果strict为true,则如果path中不包含反斜杠结尾,则他也不能匹配包含反斜杠结尾的路径,这个需要和exact结合使用

    展开全文
  • 转载自:react-router和react-router-dom的区别react-router-v4,我称之为“第四代react-router”,react-router和react-router-dom的区别是什么呢?为什么有时候我们看到如下的写法:写法1:import {Swtich, Route, ...
  • 了解React的同学一定了解React-Router,这个几乎是React单页面应用必备的路由框架。如果有足够多的开发经验,你一定会发现React-Router的很多问题,比如:没有页面缓存、不能传递属性、脱离JSX的动态加载和过滤器...
  • react-router-dom嵌套路由

    2019-08-29 16:49:28
    因为之前不是专门做react的所以对于react-router的关注也比较少,react-router有多个版本还衍生除了react-router-dom这些新的第三方库(老子学不动了o(╥﹏╥)o)。就拿最近的3.0和4.0来说吧,嵌套路由的方式完全不...
  • React-router v4教程

    2019-01-07 23:04:46
    在这个教程里,我们会从一个例子React应用开始学习react-router-dom。其中你会学习如何使用Link、NavLink等来实现跳转,Switch和exact实现排他路由和浏览器路径历史。 也许学习react-router最好的办法就是用react-...
  • react-router是伴随着react框架出现的路由系统,它也是公认的一种优秀的路由解决方案。在使用react-router时候,我们常常会使用其自带的路径跳转组件Link,通过实现跳转,这和传统的何其相似!但它们到底有什么具体的...
  • react-router-dom和react-router-config的结合应用) 1.安装 npm i react-router-dom react-router-config –save 2.导入(需要的页面) import { BrowserRouter, Route, Link,Switch,NavLink } from 'react-...
  • 路由的概念 路由的作用就是将url和函数进行映射,在...每一门JS框架都会有自己定制的router框架,react-router就是react开发应用御用的路由框架,目前它的最新的官方版本为4.1.2。本文给大家介绍的是react-router相...
  • react-router-dom正是React推荐的常用路由模块 安装 npm install react-router-dom 按需导入react-router-dom路由模块 HashRouter是路由的根容器 所有和路由相关的东西都要包裹在HashRouter内部 且一个网站只需要...
  • 继上一篇 基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式 继续讲解。 项目源码guthub地址:...这篇文章主要讲解对react-router-config的使用,达到配置路
  • 在学习React 的过程中,当学习到路由的时候,就会发现 react-router 或者 react-router-dom 组件; 这是已经写好的,可以直接拿来使用的react 路由组件;   第一个问题: 有的时候我们会看到有些react 的学习的...
  • 今天我把react-router 升级了一下, 在使用react-router-dom 是,子组件使用this.props.history 找不到了,看看官方文档,找了半天也没找到,因为我是在异步执行完后才跳转页面,需要用到push 或者replace,怎么办啊...
  • 前言 需要注意的是,现在react-router已经到了V4版本了,并且官方说这是一个完全重写的版本。...$ yarn add react-router@3.0.5 @types/react-router@3.0.5 --dev 将App.tsx相关三个文件移动到 views下,并...
  • 接下来谈一谈react-router4中如何写嵌套路由。因为在前几篇博客里写了用react-router实现单页面跳转,但是没有测试嵌套路由,导致嵌套的部分无法实现正常跳转,现已改正,并来说一说它的来龙去脉。 前言:本人用的...
  • 就需要使用到路由,在React中,常用的有两个包可以实现这个需求,即react-router和react-router-dom。那么这两个包有什么区别呢?不同之处就是后者比前者多出了<Link> <BrowserRouter>这样的 DOM 类组件...
  • react-router-v4,我称之为“第四代react-router”,react-router和react-router-dom的区别是什么呢? 为什么有时候我们看到如下的写法: 写法1: import {Swtich, Route, Router, HashHistory, Link} from 'react...
1 2 3 4 5 ... 20
收藏数 22,077
精华内容 8,830
关键字:

4 react-router