精华内容
下载资源
问答
  • react-router4-with-layouts 允许路由器具有带有打字稿定义的布局道具 安装 yarn add react-router4-with-layouts 用法 import React , { Component } from 'react' ; import { Route } from 'react-router4-with-...
  • react-router4-redux-webpack 使用基于节点表示的react,react-router4.0,redux和服务器,由webpack4.0打包 这是React的脚手架,客户端是由我使用express的react,react-ruoter4,redux和服务器构建的,顺便说一句...
  • react16-router4-模板 两个版本 master分支与v1.0.0 tag是webpack 3.x的版本 webpack-v4-template分支与v2.0.0标签是webpack 4.x的版本 Enhance-redux redux状态管理升级版本 重要更新 2018.03.19:删除“ react-...
  • React-router4

    2017-04-11 15:59:34
  • react-router4

    2019-05-23 09:51:42
    React Router被拆分成三个包:react-router,react-router-dom和react-router-native。react-router提供核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需的特定组件。 React-router ...

    React Router被拆分成三个包:react-router,react-router-domreact-router-nativereact-router提供核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需的特定组件。

    React-router

    React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api。

    React-router-dom

    React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转,大多数情况下我们是这种情况,所以在开发过程中,我们更多是使用React-router-dom。安装很简单npm i react-router-dom --save,安装了淘宝镜像的就用cnpm吧。

    进行网站(将会运行在浏览器环境中)构建,我们应当安装react-router-domreact-router-dom暴露出react-router中暴露的对象与方法,因此你只需要安装并引用react-router-dom即可。

    npm install --save react-router-dom

     

    路由器(Router)

    在你开始项目前,你需要决定你使用的路由器的类型。对于网页项目,存在<BrowserRouter><HashRouter>两种组件。

    <HashRouter>通过hash值来对路由进行控制。如果你使用HashRouter,你的路由就会默认有这个#。

    localhost:3000/#/

    很多情况下我们则不是这种情况,我们不需要这个#,因为它看起来很怪,这时我们就需要用到<BrowserRouter>

    它的原理是使用HTML5 history API (pushState, replaceState, popState)来使你的内容随着url动态改变的

    当存在服务区来管理动态请求时,需要使用<BrowserRouter>组件,而<HashRouter>被用于静态网站。

    通常,我们更倾向选择<BrowserRouter>,但如果你的网站仅用来呈现静态文件,那么<HashRouter>将会是一个好选择。

    对于我们的项目,假设将会有服务器的动态支持,因此我们选择<BrowserRouter>作为路由器组件。

    localhost:3000

    Route

    • Route是路由的一个原材料,它是控制路径对应显示的组件。我们经常用的是exact、path以及component属性。
    ​<Route path='/roster'/>
    // 当路径名为'/'时, path不匹配
    // 当路径名为'/roster'或'/roster/2'时, path匹配
    // 当你只想匹配'/roster'时,你需要使用"exact"参数
    // 则路由仅匹配'/roster'而不会匹配'/roster/2'
    <Route exact path='/roster'/>
    
    ​

    exact控制匹配到/路径时不会再继续向下匹配,path标识路由的路径,component表示路径对应显示的组件。后面我们将结合NavLink完成一个很基本的路由使用。同时我们可以设置例如/second/:id的方式来控制页面的显示,这需要配合Link或者NavLink配合使用。下面我们会提到

    • <Route>是如何渲染的?

    当一个路由的path匹配成功后,路由用来确定渲染结果的参数有三种。只需要提供其中一个即可。

    • component : 一个React组件。当带有component参数的route匹配成功后,route会返回一个新的元素,其为component参数所对应的React组件(使用React.createElement创建)。

    • render : 一个返回React element的函数[注5]。当匹配成功后调用该函数。该过程与传入component参数类似,并且对于行级渲染与需要向元素传入额外参数的操作会更有用。

    • children : 一个返回React element的函数。与上述两个参数不同,无论route是否匹配当前location,其都会被渲染。

    <Route path='/page' component={Page} />
    const extraProps = { color: 'red' }
    <Route path='/page' render={(props) => (
      <Page {...props} data={extraProps}/>
    )}/>
    <Route path='/page' children={(props) => (
      props.match
        ? <Page {...props}/>
        : <EmptyPage {...props}/>
    )}/>
    

    通常component参数与render参数被更经常地使用。children参数偶尔会被使用,它更常用在path无法匹配时呈现的'空'状态

    Link和NavLink的选择

    两者都是可以控制路由跳转的,不同点是NavLink的api更多,更加满足你的需求。

    Link

    主要api是to,to可以接受string或者一个object,来控制url。使用方法如下


    这时点击Link就会跳转到courses。

     

     

    展开全文
  • react-plan react、 react-router、redux 最佳实践 文章地址1: 文章地址2:
  • <div><p>Thank you for making this. I wanna use this with react-router v4. Can I use this with react-router v4 ?</p><p>该提问来源于开源项目:adamziel/react-router-named-routes</p></div>
  • 基于react 16.8+ , react-router 4+开发的react缓存组件,可以用作缓存页面组件,类似vue的keepalive封装vue-router的效果功能。 采用react hooks全新api ,支持缓存路由,手动解除缓存,增加了缓存的状态周期,...
  • React - Router4

    2018-05-04 14:00:09
    安装React Router被拆分成三个包:react-router,react-router-dom和react-router-native。react-router提供核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需的特定组件。进行网站(将会...

    安装

    React Router被拆分成三个包:react-router,react-router-domreact-router-nativereact-router提供核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需的特定组件。

    进行网站(将会运行在浏览器环境中)构建,我们应当安装react-router-domreact-router-dom暴露出react-router中暴露的对象与方法,因此你只需要安装并引用react-router-dom即可。

    npm install --save react-router-dom
    

    路由器(Router)

    在你开始项目前,你需要决定你使用的路由器的类型。对于网页项目,存在<BrowserRouter><HashRouter>两种组件。当存在服务区来管理动态请求时,需要使用<BrowserRouter>组件,而<HashRouter>被用于静态网站。

    通常,我们更倾向选择<BrowserRouter>,但如果你的网站仅用来呈现静态文件,那么<HashRouter>将会是一个好选择。

    对于我们的项目,将设将会有服务器的动态支持,因此我们选择<BrowserRouter>作为路由器组件。

    历史(History)

    每个路由器都会创建一个history对象并用其保持追踪当前location[注1]并且在有变化时对网站进行重新渲染。这个history对象保证了React Router提供的其他组件的可用性,所以其他组件必须在router内部渲染。一个React Router组件如果向父级上追溯却找不到router组件,那么这个组件将无法正常工作。

    渲染<Router>

    路由器组件无法接受两个及以上的子元素。基于这种限制的存在,创建一个<App>组件来渲染应用其余部分是一个有效的方法(对于服务端渲染,将应用从router组件中分离也是重要的)。

    import { BrowserRouter } from 'react-router-dom'
    ReactDOM.render((
      <BrowserRouter>
        <App />
      </BrowserRouter>
    ), document.getElementById('root'))
    

    <App>

    应用通过<App>组件定义。简化一下,我们将应用拆分成两个部分。<Header>组件包含网站的导航链接。<Main>组件则呈现其余内容。

    // this component will be rendered by our <___Router>
    const App = () => (
      <div>
        <Header />
        <Main />
      </div>
    )
    

    注意:你可以按你喜欢的方式对应用布局,但是将路由与导航拆分出来对于这个入门教程会成家简单。

    路由(Route)

    <Route>组件是React Router中主要的结构单元。在任意位置只要匹配了URL的路径名(pathname)你就可以创建<Route>元素进行渲染。

    路径(Path)

    <Route>接受一个数为string类型的path,该值路由匹配的路径名的类型。例如:<Route path='/roster'/>会匹配以/roster[注2]开头的路径名。在当前path参数与当前location的路径相匹配时,路由就会开始渲染React元素。若不匹配,路由不会进行任何操作[注3]。

    <Route path='/roster'/>
    // 当路径名为'/'时, path不匹配
    // 当路径名为'/roster''/roster/2'时, path匹配
    // 当你只想匹配'/roster'时,你需要使用"exact"参数
    // 则路由仅匹配'/roster'而不会匹配'/roster/2'
    <Route exact path='/roster'/>
    

    注意:在匹配路由时,React Router只关注location的路径名。当URL如下时:

    http://www.example.com/my-projects/one?extra=false
    

    React Router去匹配的只是'/my-projects/one'这一部分。

    匹配路径

    path-to-regexp包用来决定route元素的path参数与当前location是否匹配。它将路径字符串编译成正则表达式,并与当前location的路径名进行匹配比较。除了上面的例子外,路径字符串有更多高级的选项,详见[path-to-regexp文档]。
    当路由地址匹配成功后,会创建一个含有以下属性的match对象

    • url :与当前location路径名所匹配部分

    • path :路由的地址

    • isExact :path 是否等于 pathname

    • params :从path-to-regexp获取的路径中取出的值都被包含在这个对象中

    使用route tester这款工具来对路由与URL进行检验。

    注意:本例中路由路径仅支持绝对路径[注4]。

    创建你的路由

    可以在路由器(router)组件中的任意位置创建多个<Route>,但通常我们会把它们放在同一个位置。使用<Switch>组件来包裹一组<Route>。<Switch>会遍历自身的子元素(即路由)并对第一个匹配当前路径的元素进行渲染。

    对于本网站,我们希望匹配一下路径:

    • / : 主页

    • /roster : 团体列表

    • /roster/:number :运动员页面,使用运动员的编号作为标识

    • /schedule :团队的赛程表

    为了在应用中能匹配路径,在创建<Route>元素时必须带有需要匹配的path作为参数。

    <Switch>
      <Route exact path='/' component={Home}/>
      {/* both /roster and /roster/:number begin with /roster */}
      <Route path='/roster' component={Roster}/>
      <Route path='/schedule' component={Schedule}/>
    </Switch>
    

    <Route>是如何渲染的?

    当一个路由的path匹配成功后,路由用来确定渲染结果的参数有三种。只需要提供其中一个即可。

    • component : 一个React组件。当带有component参数的route匹配成功后,route会返回一个新的元素,其为component参数所对应的React组件(使用React.createElement创建)。

    • render : 一个返回React element的函数[注5]。当匹配成功后调用该函数。该过程与传入component参数类似,并且对于行级渲染与需要向元素传入额外参数的操作会更有用。

    • children : 一个返回React element的函数。与上述两个参数不同,无论route是否匹配当前location,其都会被渲染。

    <Route path='/page' component={Page} />
    const extraProps = { color: 'red' }
    <Route path='/page' render={(props) => (
      <Page {...props} data={extraProps}/>
    )}/>
    <Route path='/page' children={(props) => (
      props.match
        ? <Page {...props}/>
        : <EmptyPage {...props}/>
    )}/>
    

    通常component参数与render参数被更经常地使用。children参数偶尔会被使用,它更常用在path无法匹配时呈现的'空'状态。在本例中并不会有额外的状态,所以我们将使用<Route>的component参数。

    通过<Route>渲染的元素会被传入一些参数。分别是match对象,当前location对象[注6]以及history对象(由router创建)[注7]。

    <Main>

    现在我们清楚了根路由的结构,我们需要实际渲染我们的路由。对于这个应用,我们将会在<Main>组件中渲染<Switch>与<Route>,这一过程会将route匹配生成的HTML放在<main>节点中。

    import { Switch, Route } from 'react-router-dom'
    const Main = () => (
      <main>
        <Switch>
          <Route exact path='/' component={Home}/>
          <Route path='/roster' component={Roster}/>
          <Route path='/schedule' component={Schedule}/>
        </Switch>
      </main>
    )
    

    注意:主页路由包含额外参数。该参数用来保证路由能准确匹配path。

    嵌套路由

    运动员路由/roster/:number并未包含在上述<Switch>中。它由<Roster>组件负责在路径包含'/roster'的情形下进行渲染。

    在<Roster>组件中,我们将为两种路径进行渲染:

    • /roster :对应路径名仅仅是/roster时,因此需要在exact元素上添加exact参数。

    • /roster/:number : 该路由使用一个路由参数来获取/roster后的路径名。

      const Roster = () => (
      <Switch>

      <Route exact path='/roster' component={FullRoster}/>
      <Route path='/roster/:number' component={Player}/>

      </Switch>
      )

      组合在相同组件中分享共同前缀的路由是一种有用的方法。这就需要简化父路由并且提供一个区域来渲染具有相同前缀的通用路由。

    例如,<Roster>用来渲染所有以/roster开始的全部路由。

    const Roster = () => (
      <div>
        <h2>This is a roster page!</h2>
        <Switch>
          <Route exact path='/roster' component={FullRoster}/>
          <Route path='/roster/:number' component={Player}/>
        </Switch>
      </div>
    )
    

    路径参数

    有时路径名中存在我们需要获取的参数。例如,在运动员界面,我们需要获取运动员的编号。我们可以向route的路径字符串中添加path参数

    如'/roster/:number'中:number这种写法意味着/roster/后的路径名将会被获取并存在match.params.number中。例如,路径名'/roster/6'会获取到一个对象:

    { number: '6' } // 注获取的值是字符串类型的
    

    <Player>组件可以使用props.match.params对象来确定需要被渲染的运动员的数据。

    // 返回运动员对象的API
    import PlayerAPI from './PlayerAPI'
    const Player = (props) => {
      const player = PlayerAPI.get(
        parseInt(props.match.params.number, 10)
      )
      if (!player) {
        return <div>Sorry, but the player was not found</div>
      }
      return (
        <div>
          <h1>{player.name} (#{player.number})</h1>
          <h2>{player.position}</h2>
        </div>
    )
    

    你可以通过阅读path-to-regexp文档来了解更多。

    除了<Player>组件,我们的页面还包含<FullRoster>, <Schedule>以及 <Home>组件。

    const FullRoster = () => (
      <div>
        <ul>
          {
            PlayerAPI.all().map(p => (
              <li key={p.number}>
                <Link to={`/roster/${p.number}`}>{p.name}</Link>
              </li>
            ))
          }
        </ul>
      </div>
    )
    const Schedule = () => (
      <div>
        <ul>
          <li>6/5 @ Evergreens</li>
          <li>6/8 vs Kickers</li>
          <li>6/14 @ United</li>
        </ul>
      </div>
    )
    const Home = () => (
      <div>
        <h1>Welcome to the Tornadoes Website!</h1>
      </div>
    )
    

    Link

    现在,我们应用需要在各个页面间切换。如果使用锚点元素(就是)实现,在每次点击时页面将被重新加载。React Router提供了<Link>组件用来避免这种状况的发生。当你点击<Link>时,URL会更新,组件会被重新渲染,但是页面不会重新加载。

    import { Link } from 'react-router-dom'
    const Header = () => (
      <header>
        <nav>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/roster'>Roster</Link></li>
            <li><Link to='/schedule'>Schedule</Link></li>
          </ul>
        </nav>
      </header>
    )
    

    <Link>使用'to'参数来描述需要定位的页面。它的值即可是字符串也可是location对象(包含pathname,search,hash与state属性)。如果其值为字符床将会被转换为location对象。

    <Link to={{ pathname: '/roster/7' }}>Player #7</Link>
    

    注意:本例的link的pathname属性只能是绝对路径[注4]。

    例子

    一个完整的网站例子

    获取路由

    希望当下你已准备好深入构建你自己的网站了。

    我们已经了解了构建网站所需要的所有必须组件(<BrowserRouter>, <Route>, 以及 <Link>)。当然,还有一些我们没有涉及的组件。所幸React Router拥有优质的文档,你可以查看并从中了解更多的信息。文档也提供一系列的例子与源代码。

    注释:

    [1] locations 是一个含有描述URL不同部分属性的对象:

    // 一个基本的location对象
    { pathname: '/', search: '', hash: '', key: 'abc123' state: {} }
    

    [2] 你可以渲染无路径的<Route>,其将会匹配所有location。此法用于访问存在上下文中的变量与方法。

    [3] 如果你使用children参数,即便在当前location不匹配时route也将进行渲染。

    [4] 当需要支持相对路径的<Route>与<Link>时,你需要多做一些工作。相对<Link>将会比你之前看到的更为复杂。因其使用了父级的match对象而非当前URL来匹配相对路径。

    [5] 这是一个本质上无状态的函数组件。内部实现,component参数与render参数的组件是用很大的区别的。使用component参数的组件会使用React.createElement来创建元素,使用render参数的组件则会调用render函数。如果我们定义一个内联函数并将其传给component参数,这将会比使用render参数慢很多。

    <Route path='/one' component={One}/>
    // React.createElement(props.component)
    <Route path='/two' render={() => <Two />}/>
    // props.render()
    

    [6] <Route>与<Switch>组件都会带有location参数。这能让你使用与实际location不同的location去匹配地址。

    [7] 可以传入staticContext参数,不过这仅在服务端渲染时有用。

    展开全文
  • react-router V4

    2019-02-25 17:33:49
    https://reacttraining.com/react-router/web/guides/quick-start 提供 React Router4.0 路由的练习 ...react-router:基础路由包 提供了一些router的核心api,包括Router,Route,Switch等 ...

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

    提供 React Router4.0 路由的练习


    1.React Router4.0 基本概念介绍


    4.0版本已不需要路由配置,一切皆组件

    react-router:基础路由包

    提供了一些router的核心api,包括Router,Route,Switch等
    react-router-dom:基于浏览器端的路由(包含react-router)

    提供了BrowserRouter,HashRouter,Route,Link,NavLink
    安装:npm install react-router-dom --save或yarn add react-router-dom
    react-router-dom核心用法

    HashRouter和BrowserRouter

    HashRouter的写法: eg.http://localhost:3000/#/admin/buttons
    BrowserRouter的写法:eg.http://localhost:3000/admin/buttons

    Route:path、exact、component、render

    exact属性代表精准匹配,必须path完全匹配才可以加载对应组件 


    eg1.
    <Route path='/admin/ui/buttons' component={Buttons}/>
    eg2.
    <Route path='/admin' render={()=>
        <Admin>
            <Route path='/admin/home' component={Home} />
        </Admin>
    }/>
     

    NavLink应用于菜单里作为菜单导航、Link超链接导航

    eg1.
    import {Link} from 'react-router-dom';
    const Header=()=>{
        <header>
            <nav>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/about'>About</Link></li>
                <li><Link to='/three'>Three</Link></li>
            </nav>
        </header>
    }
    eg2.
    <Link to={{pathname:'/three/7'}}>Three #7</Link>

    定义:<Route path="/three/:number"/>取值:this.props.match.params.number

    同时在to属性中可以传递一个location对象,如:

    {pathname:'/',search:' ',hash:'',key:'abc123',state:{}}
    1
    可以通过this.props.match.params.对象属性名取值

    Switch[选择符合要求的Route,自上至下找到一个可以匹配的内容则不继续加载其他]

    <Switch>
        <Route path='/admin/ui/buttons' component={Buttons}/>
        <Route path='/admin/ui/models' component={Models}/>
        <Route path='/admin/ui/loading' component={Loading}/>
    </Switch>

    Redirect

    路由重定向:<Redirect to="/admin/home">

     2.React Router4.0 Demo介绍


    4.0基本路由功能DEMO实现-混合组件化【将Route和Link放到同一个页面】
    HashRouter将Link和Router进行包裹,其内部必须只能有一个子节点

    通过Link组件的to属性设置路由地址;通过Route组件的path属性匹配路由地址,从而渲染对应component中的组件【注意:Route添加exact属性可以做到路径的精准匹配,否则/about既可以匹配/也可以匹配/about等路由地址】

     

    实例代码:

    Home.js用于显示整个页面内容

    import React from 'react';
    import {HashRouter,Route,Link,Switch} from 'react-router-dom'
    import Main from './Main';
    import About from './About';
    import Topics from './Topics';
    class Home extends React.Component{
      render(){
          return(
              <HashRouter>
                  <div>
                      <ul>
                          <li>
                              <Link to="/">Home</Link>
                          </li>
                          <li>
                              <Link to="/about">About</Link>
                          </li>
                          <li>
                              <Link to="/topics">Topics</Link>
                          </li>
                      </ul>
                      <hr></hr>
                      <Route path="/" exact={true} component={Main}></Route>
                      <Route path="/about" component={About}></Route>
                      <Route path="/topics" component={Topics}></Route>
                  </div>   
              </HashRouter>
          );
      }
    }
    export default Home;
     

    Main.js组件 

    import React,{Component} from 'react';
    class Main extends Component{
      render(){
          return(
              <div>
                  this is Main.
              </div>
          );
      }
    }
    export default Main;
     

    Topic.js组件 

    import React,{Component} from 'react';
    class Topics extends Component{
      render(){
          return(
              <div>
                  this is Topics.
              </div>
          );
      }
    }
    export default Topics;
     

    About.js组件 

    import React,{Component} from 'react';
    class About extends Component{
      render(){
          return(
              <div>
                  this is About.
              </div>
          );
      }
    }
    export default About;


    4.0基本路由功能DEMO实现-配置化【将Route路由提取到一个单独的JS文件中】
    配置化实现路由功能

    创建Home.js内部写上ul->li->Link导航组件,并在想要显示对应路由内容的区域写上{this.props.children}即会加载调用Home.js组建时内部传递的信息
    创建router.js,最外层用HashRouter包裹,第二级用Home组件包裹,内部写对应路由Route(path路由路径匹配、及component属性渲染的组件)
    执行流程,index.js渲染Router组件时,由于最外层是HashRouter,内部是Home组件故加载Home组件内容,并通过{this.props.children}得到在调用Home组件时内部的信息。


    嵌套路由

    如想实现在Main组件中的嵌套路由,需要在Main组件中添加{this.props.children}从而渲染对应的内部信息,还需要添加Link组件以进行跳转
    之后在router.js中对应调用该组件的Route组件中,删除component属性,添加render属性进行页面渲染,render属性内应是一个函数,返回Main组件(内部带有Route属性以进行路由渲染)
    注意点: 
    调用Main组件的Route不能添加exact属性,因为如果添加exact属性,当点击内部组件路由到对应url时由于与外部Route的path不是完全匹配,故将不会显示
    调用Main组件的Route内部render函数如果添加()=>{}则需要在函数体内写return,因为{}表示函数体,内部的函数将被执行,返回组件需要写return;如果不添加大括号则直接写返回的组件即可,ES6箭头函数默认箭头后面的内容是return的
    调用Main组件的Route内部Main里的Route组件的path需要包含外部Route的path作为一级路由,如外部是/main内部需要是/main/xxx,如果不以外部Route作为一级路由则不会走外部的Route到内部Route内容

     实例代码

    /src/pages/router-demo/router2/router.js
    import React from 'react';
    import {HashRouter as Router,Route,Link}from 'react-router-dom';
    import Main from './../router1/Main';
    import About from './../router1/About';
    import Topics from './../router1/Topics';
    import Home from './Home';
    class IRoute extends React.Component{
      render(){
          return(
              <Router>
                  <Home>
                      <Route path="/main" render={()=>{
                          return(
                          <Main>
                              <Route path="/main/a" component={About}></Route>
                          </Main>
                          );}}></Route>
                      <Route path="/about" component={About}></Route>
                      <Route path="/topics" component={Topics}></Route>
                  </Home>
              </Router>
          );
      }
    }
    export default IRoute;
     

     

    /src/pages/router-demo/router2/Home.js
    import React from 'react';
    import {Link} from 'react-router-dom'

    class Home extends React.Component{
      render(){
          return(
              <div>
                  <ul>
                      <li>
                          <Link to="/main">Home1</Link>
                      </li>
                      <li>
                          <Link to="/about">About1</Link>
                      </li>
                      <li>
                          <Link to="/topics">Topics1</Link>
                      </li>
                  </ul>
                  <hr></hr>
                  {this.props.children}
              </div>
          );
      }
    }
    export default Home;

     /src/pages/router-demo/router2/Main.js
    import React,{Component} from 'react';
    import {Link} from 'react-router-dom';
    class Main extends Component{
      render(){
          return(
              <div>
                  this is Main.
                  <Link to="/main/a">To start a</Link>
                  <hr></hr>
                  {this.props.children}
              </div>
          );
      }
    }
    export default Main;

    获取动态路由的值

    在Main.js中设置跳转的路由链接
    import React,{Component} from 'react';
    import {Link} from 'react-router-dom';
    class Main extends Component{
        render(){
            return(
                <div>
                    this is Main.<br/>
                    <Link to="/main/test-id">嵌套路由1</Link><br/>
                    <Link to="/main/456">嵌套路由2</Link>
                    <hr></hr>
                    {this.props.children}
                </div>
            );
        }
    }
    export default Main;

     

     在router.js中添加动态路由即path:"/main/:value"用冒号定义的路由内容
    import React from 'react';
    import {HashRouter as Router,Route,Link,Switch}from 'react-router-dom';
    import Main from './Main';
    import About from './../router1/About';
    import Topics from './../router1/Topics';
    import Home from './Home';
    import Info from './Info';
    import NoMatch from './NoMatch';
    class IRoute extends React.Component{
        render(){
            return(
                <Router>
                    <Home>
                        <Switch>
                            <Route path="/main" render={()=>{
                                return(
                                <Main>
                                    <Route path="/main/:value" component={Info}></Route>
                                </Main>
                                );}}></Route>
                            <Route path="/about" component={About}></Route>
                            <Route path="/topics" component={Topics}></Route>
                            <Route component={NoMatch}></Route>
                        </Switch>
                    </Home>
                </Router>
            );
        }
    }
    export default IRoute

     在Info.js中获取定义的动态路由内容信息,通过{this.props.match.params.路由的名称}
    import React,{Component} from 'react';
    class Info extends Component{
        render(){
            return(
                <div>
                    这里是测试动态路由功能
                    动态路由的值是{this.props.match.params.value}
                </div>
            );
        }
    }
    export default Info;

     添加默认路由

    添加react-router-dom的Switch组件包裹Route组件用于设置自上自下只匹配一个路由

    添加没有path属性的Route组件放置Switch组件内部的最后位置,作为默认路由

    router.js如上代码,NoMatch.js如下所示:

    import React from 'react';
    class NoMatch extends React.Component{
        render(){
            return(
                <div>
                    404 Not Found
                </div>
            );
        }
    }
    export default NoMatch;


    3.项目路由实战开发


    由于用户访问项目时输入url需要有对应的输出,而作为整个文件输出时,一共有三种情况:登录、详情页、首页。故需要编写项目的入口文件router.js并在index.js中引入。【代码省略…】

    router文件中定义使用路由的方式为HashRouter(即#/xxx/xxx的形式)

    由于我们要访问完整路由时有登录页面、详情页面和首页,router文件需要定义根组件App,App.js内部什么都没有只有{this.props.children},主要用来存放子组件(即上述三个页面)。【如果没有用App进行包裹,即没有地方设置{this.props.children}显示路由的页面内容,即上述三个页面没法显示】

    【总结结论:想利用Route显示组件信息,则必须有调动{this.props.children}显示其页面的组件】

    有三个页面就需要有三个路由path分别为/login渲染登录组件、/admin渲染首页(其中里用render函数返回子路由Admin组件,并定义嵌套路由/admin/ui/buttons显示组件按钮;无path显示404页面,外层用Switch包裹保证只显示其中第一个匹配的Route)、和/order/detail渲染详情页。

    //[/src/router.js]
    import React,{Component} from 'react';
    import {HashRouter,Route,Switch} from 'react-router-dom';
    import App from './App';
    import Login from './pages/login';
    import Admin from './admin';
    import Buttons from './pages/ui/buttons';
    import NoMatch from './pages/nomatch';
    class IRouter extends Component{
      render(){
          return(
              <HashRouter>
                  <App>
                      <Route path="/login" component={Login}></Route>
                      <Route path="/admin" render={()=>{
                          return(
                              <Admin>
                                  <Switch>
                                      <Route path="/admin/ui/buttons" component={Buttons}></Route>
                                      <Route component={NoMatch}></Route>
                                  </Switch>
                              </Admin>
                          );
                      }}></Route>
                      <Route path="/order/detail" component={Login}></Route>
                  </App>
              </HashRouter>
          );
      }
    }
    export default IRouter;


    将Admin组件中的content部分使用{this.props.children}显示在router.js中Route得到的页面

    //[/src/admin.js]
    import React from 'react';
    import { Row, Col } from 'antd';
    import Header from './components/Header';
    import Footer from './components/Footer';
    import NavLeft from './components/NavLeft';
    import Home from './pages/home';
    import './style/common.less'
    class Admin extends React.Component{
      render(){
          return(
              <Row className="container">
                  <Col span={6} className="nav-left">
                      <NavLeft/>
                  </Col>
                  <Col span={18} className="main">
                      <Header/>
                      <Row className="content">
                          {/* <Home></Home> */}
                          {this.props.children}
                      </Row>
                      <Footer/>
                  </Col>
              </Row>
          );
      }
    }
    export default Admin;

    有Route就一定要有Link指定路由地址,我们在首页中通过左侧导航栏进行跳转,故需要在NavLeft组件中利用react-router-dom的NavLink设置路由地址,NavLink组件显示的内容为{item.title},to跳转的地址为{item.key} 

    //[/src/components/NavLeft/index.js]
    import React from 'react';
    import {Menu,Icon} from 'antd';
    import MenuConfig from './../../config/menuConfig';
    import './index.less';
    import MenuItem from 'antd/lib/menu/MenuItem';
    import {NavLink} from 'react-router-dom';
    const SubMenu = Menu.SubMenu;
    class NavLeft extends React.Component{
      componentWillMount(){
          const menuTreeNode = this.renderMenu(MenuConfig);
          this.setState({
              menuTreeNode
          })
      }
      //菜单渲染
      renderMenu=(data)=>{
          return data.map((item,index)=>{
              if(item.children){
                  return(
                      <SubMenu title={item.title} key={item.key}>
                          {this.renderMenu(item.children)}
                      </SubMenu>
                  )
              }
              return <Menu.Item title={item.title} key={item.key}>
                  <NavLink to={item.key}>{item.title}</NavLink>
              </Menu.Item>
          })
      }
      render(){
          return(
              <div>
                  <div className="logo">
                      <img src="/assets/logo-ant.svg"  alt=""></img>
                      <h1>Imooc MS</h1>
                  </div>
                  <Menu theme="dark">
                      {this.state.menuTreeNode}
                  </Menu>
              </div>
          );
      }
    }  
    export default NavLeft;
     

    在router.js中可以看到如果匹配的是/admin/ui/buttons则将Button组件渲染到Admin组件的content中;如没有写对应的路由匹配则将404页面渲染到Admin组件的content中,对应代码如下 

    //[/src/pages/ui/buttons.js]
    import React,{Component} from 'react';
    class Buttons extends Component{
      render(){
          return(
              <div>
                  This is Buttons Page.
              </div>
          )
      }
    }
    export default Buttons;
    //[/src/pages/nomatch/index.js]
    import React from 'react';
    class NoMatch extends React.Component{
      render(){
          return(
              <div style={{textAlign:'center',fontSize:'24'}}>
                  404 Not Found!!!
              </div>
          );
      }
    }
    export default NoMatch;
     

    展开全文
  • 是一个全新的基于webpack3,react15,react-router4,antd-mobile的前端架构实现方案(h5) react-molin的优势 基于最新的webpack3,react15,react-router4 引用antd官方框架更加轻量级 支持多个单页面应用同时开发...
  • React-router v4

    2021-01-08 20:58:09
    <div><p>Well, <code><Route></code>s are gone... We will have work to thing about that....<p>https://react-router.now.sh/basic</p><p>该提问来源于开源项目:phenomic/phenomic</p></div>
  • 具有React,React-Router v4,热重载和Sass的简单基础应用程序。 npm i -g simple-react-app安装软件包。 simple-react-app folderName将样板启动到folderName文件夹中。 或者,如果您使用的是npm@5.2.0或更高...
  • <div><p>I am using react-url-query with react-router v4 as shown in the example but its throwing <strong>No history provided to react-url-query. Please provide one via configureUrlQuery.</strong> ...
  • react-router 4

    2018-06-18 10:36:13
    分为 react-router-dom(浏览器) 和 react-router-native(原生app);目前版本2和版本4完全是两个东西 ,需要重新开始学习。第一部分:核心概念 : 动态路由,Route ,link ,switch.1,BrowserRouter 最外层包裹整个...
  • react-router v4

    2017-07-25 17:38:05
    安装模块 react-router-dom   导出组件 { HashRouter, Route,Link,Switch } from 'react-router-dom'  用列:  (    transitionName="example"  
  • 基于create-react-app2.x,基础项目集成搭建,包含路由,其中一个 页面仿腾讯天气,基于react方向主流技术栈实现,脚手架create-react-app,全部技术栈:react+mobx+antd+react-router4.x+axios+webpack4.x ...
  • 先说一下React-router4的使用 要想使用React-router4,需要引入两个东西, React-router和React-router-dom React-router:React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它不能直接...
  • 一.前言 上午把近日用React做的一个新闻项目所依赖的包升级到了最新的版本,其中从react-router(2.8.1)升级到react-router(4.1.2)中出现了很多问题, 故总结一下在升级过程中遇到的...在react-router4 开始,所有的router
  • 本文主要介绍了React-router v4 路由配置方法小结,分享给大家,也给自己留个笔记 一. Switch 、Router 、Route三者的区别 1、Route Route 是建立location 和 ui的最直接联系 2、Router react-router v4 中,...
  • React + React-Router 4 + Redux + Ant Design + Webpack 4带有热重载和redux-devtools-extension入门 :warning_selector: Ant Design仍在升级到ReactJS 16.3新生命周期,因此,应用目前无法正常运行 完整的Ant ...
  • 一个简单有效的演示,包括React + Redux + Webpack4 + react-router4和Ant.design 发展 npm开始 生产 npm运行构建 关于自动联合减速机 需要在“ src / container”文件夹内的文件夹中使用creact reducer 通过“状态...
  • 学时候在网上看各种资料总会遇到这俩:React-routerReact-router-dom 最早刚开始参与项目的时候也经常会看到这两个的import,心有疑问,但当时也没太注意。大概了解后就没在管了(其实是太懒) 现在抽空来点总结,...
  • 本工程主要基于react16 + redux +不可变+更少+ ES6 / 7 + webpack4 + babel7 +抓取+ react-router + antd3实现的SPA后台管理系统模板。宝贵的意见和建议,谢谢。 如果觉得不错的话,请star一下吧 :smiling_face_with...
  • React-router4 基础知识 React-router4 是什么? React-router4 是官方推荐的路由库,它和 之前的版本 不兼容,是一次重大的更新。 React-router4 能做什么?React 开发单面应用必备,践行路由即组件的概念。 ...
  • 轻松学 React-Router 4(19 个视频) 轻松学 React-Router 4 #01 介绍「06:34」 轻松学 React-Router 4 #02 BrowserRouter 与 HashRouter「04:11」 轻松学 React-Router 4 #03 Link「03:22」 轻松学 React-Router 4 ...
  • react-router4中使用react-loadable进行组件的懒加载和代码分割。不同于以往的版本的react-router,react-loadable将react的组件化思想贯彻到底,其懒加载即使用react-loadable创建一个懒加载的组件。 刚开始使用的...
  • 该项目是一个示例,展示了如何使用webpack 2,flow,css-modules,scss,react,react-router v4,redux(带有thunk),JWT auth,jest,ease,ES6,babel和axios。 现场演示: 建立: npm install 用法 $ npm ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,801
精华内容 1,120
关键字:

react-router4