• react router 4.0以上的路由应用在4.0以下的react router中,嵌套的路由可以放在一个router标签中,形式如下,嵌套的路由也直接放在一起。<Route component={App}> <Route path="groups&...

    react router 4.0以上的路由应用

    在4.0以下的react router中,嵌套的路由可以放在一个router标签中,形式如下,嵌套的路由也直接放在一起。

    <Route component={App}>
        <Route path="groups" components={Groups} />
        <Route path="users" components={Users}>
          <Route path="users/:userId" component={Profile} />
        </Route>
    </Route>
    

    但是在4.0以后,嵌套的路由与之前的就完全不同了,需要单独放置在嵌套的根component中去处理路由,否则会一直有warning:

    You should not use <Route component> and <Route children> in the same route

    正确形式如下

    <Route component={App}>
        <Route path="groups" components={Groups} />
        <Route path="users" components={Users}>
          //<Route path="users/:userId" component={Profile} />
        </Route>
    </Route>
    

    上面将嵌套的路由注释掉

    const Users = ({ match }) => (
      <div>
        <h2>Topics</h2>
        <Route path={`${match.url}/:userId`} component={Profile}/>
      </div>
    ) 
    

    上面在需要嵌套路由的component中添加新的路由

    一个完整的嵌套路由的例子如下

    说明及注意事项

    1. 以下代码采用ES6格式
    2. react-router-dom版本为4.1.1
    3. 请注意使用诸如HashRouter之类的history,否则一直会有warning,不能渲染
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    // import { Router, Route, Link, Switch } from 'react-router';
    import {
      HashRouter,
      Route,
      Link,
      Switch
    } from 'react-router-dom';
    
    class App extends Component {
      render() {
        return (
          <div>
            <h1>App</h1>
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/inbox">Inbox</Link></li>
            </ul>
            {this.props.children}
    
          </div>
        );
      }
    }
    
    const About = () => (
      <div>
        <h3>About</h3>
      </div>
    )
    
    const Home = () => (
      <div>
        <h3>Home</h3>
      </div>
    )
    
    const Message = ({ match }) => (
      <div>
        <h3>new messages</h3>
        <h3>{match.params.id}</h3>
      </div>
    )
    
    const Inbox = ({ match }) => (
      <div>
        <h2>Topics</h2>
        <Route path={`${match.url}/messages/:id`} component={Message}/>
    
      </div>
    ) 
    
    ReactDOM.render(
      (<HashRouter>
        <App>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/inbox" component={Inbox} />
        </App>
      </HashRouter>),
      document.getElementById('root')
    );
    展开全文
  • 在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函数: ... router.beforeEach(async(to...
  • 4.0版本之前,路由的定义是在src/router.js中定义嵌套路由。代码如下: &amp;lt;Router history={history}&amp;gt; &amp;lt;Route path=&quot;/&quot; component={IndexPage} &amp;gt...
  • React Router4.0 2018-11-04 16:01:40
    https://reacttraining.com/react-router/web/guides/quick-start ...4.0版本已不需要路由配置,一切皆组件 react-router:基础路由包 提供了一些router的核心api,包括Router,Route,Switch等 re...
  • React路由基本用法 2019-01-28 10:39:53
    React路由基本用法 1.React Router4.0基本概述: React Router4.0(以下简称 RR4)遵循React的设计理念,即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编程...
  • React系列之--项目中React 路由搭建demo关于react-router网上有很多介绍,在这里必要唠叨,其中在项目中react-router和react-router-dom功能是一样的,引用一个就可以了。1、react-router4.0以上的介绍。 发现一篇...
  • react路由配置 2017-08-04 17:42:35
    这是项目的目录结构,主要的代码都在src目录下,src下面新建一个containers文件夹放我们的一些组件,router文件夹是配置路由用的。 按照顺序来写:detail文件夹下的代码 import React from 'react' class Detail ...
  • 嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件。另一种是子路由路由到的组件内部...
  • react-router 4变化还是挺大的,看网上很多人遇到问题,都是基本用法的改变,所以这里记录一下。 转载自:http://www.jianshu.com/p/d6727e8d81c4 1.react-router 4.0升级不少内容,详细可看官网 ...
  • 先看页面效果 ...import React, { Component } from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' class UrlParams extends Component { render() { return ( &l...
  • 前言:在做项目的时候,花费了几天的时间才把路由问题解决,但是对react的几种路由的区分和使用,我现在也是整的还不清楚。 1、安装相关的包: (1)npm install --save-dev react-router (2)npm install --...
  • “遇到一些需求,用户在某个页面修改数据,离开时,提示用户:当前页面有数据修改,是否确认离开?...when:传递布尔值,相当于标签的开关,默认是 true,设置成 false 时,失效。 import React, { Compon...
  • react路由和异步请求 2019-01-28 23:27:23
    React 路由和异步请求 1 React 路由 1.1 为什么需要路由 在传统的 Web 应用中个,每个 URL 对应网站中的一个页面;但在 SPA(单页面应用中), 由于只有一个页面,如果要实现不同 URL 在相同页面把内容替换成不同的...
  • 可以看到现在的react-router 版本已经到达了5.0.1了,相对于之前的版本有较大的改动,现在react路由系统已经逐渐像组件那样使用了。本人对之前版本的路由基本上没有多少了解。现在由于项目需要使用开始学习路由的...
  • 1、 4.0的版本config路由和之前的1.0版本模式是差不多的,以前怎么写现在依旧那么写 { name: 'index1',//显示在浏览器上的路径 name: 'organization', icon: 'Partition', component: './Welcome'//src里面的路径 } ...
  • 1、bundle.jsimport {Component} from 'react'; export default class Bundle extends Component { constructor(props) { super(props); this.state = { mod: null }; } load = prop
  • 当然这个操作不是完全必要的,但如果你好奇的话,请随意跟随这篇文章一起用Create React App和 react路由4.0的异步加载方式来帮助react.js构建大型应用。 代码分割(Code Splitting) 当我们用react.js写我们的...
  • 写过vue的小伙伴都知道,vue的路由是在new Router 里统一配置的,写起来也特别爽,路由层次很清除,也很方便管理,然而react路由相比较而言就有局限性,也不方便管理。 import Vue from 'vue' import Router from ...
  • react-router v4 路由跳转 react-router v4 路由传参 使用 withRouter withRouter高阶组件,提供了history让你使用~ import React from "react"; import {withRouter} from "react-router-dom"...
1 2 3 4 5 ... 20
收藏数 932
精华内容 372