4 react-router3_react-router-dom react-router - CSDN
  • React-Router3React-Router4的使用区别

    千次阅读 2018-05-21 21:57:59
    React-Router3的配置使用: package,json { "name": "React-webpack-server", "version": "1.0.0", "description": "", "m

    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

    展开全文
  • react-router和react-router-dom的区别

    万次阅读 2018-06-19 20:04:39
    转载自:react-router和react-router-dom的区别react-router-v4,我称之为“第四代react-router”,react-router和react-router-dom的区别是什么呢?为什么有时候我们看到如下的写法:写法1:import {Swtich, Route, ...

    转载自:react-router和react-router-dom的区别

    react-router-v4,我称之为“第四代react-router”,react-routerreact-router-dom的区别是什么呢?

    为什么有时候我们看到如下的写法:

    写法1:

    import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';

    写法2:

    import {Switch, Route, Router} from 'react-router';
    import {HashHistory, Link} from 'react-router-dom';

    先简单说下各自的功能:

    react-router: 实现了路由的核心功能
    react-router-dom: 基于react-router,加入了在浏览器运行环境下的一些功能,例如:Link组件,会渲染一个a标签,Link组件源码a标签行BrowserRouterHashRouter组件,前者使用pushStatepopState事件构建路由,后者使用window.location.hashhashchange事件构建路由。

    react-router-native: 基于react-router,类似react-router-dom,加入了react-native运行环境下的一些功能。

    从源码层面来说明:

    首先看react-router-dom中的Switch组件的源码

    // Written in this round about way for babel-transform-imports
    import { Switch } from 'react-router'
    export default Switch

    只是从react-router中导入Switch组件,然后重新导出而已。

    查看其他模块的源码,
    Route组件的源码
    Router组件的源码
    ...

    Swtich一样,都是从react-router中导入了相应的组件,重新导出而已,并没有对实现做什么特殊处理。

    结论:

    1. react-router-dom依赖react-router,所以我们使用npm安装依赖的时候,只需要安装相应环境下的库即可,不用再显式安装react-router。基于浏览器环境的开发,只需要安装react-router-dom;基于react-native环境的开发,只需要安装react-router-nativenpm会自动解析react-router-dom包中package.json的依赖并安装。

    react-router-dompackage.json依赖:

    "dependencies": {
        "history": "^4.7.2",
        "invariant": "^2.2.2",
        "loose-envify": "^1.3.1",
        "prop-types": "^15.5.4",
        "react-router": "^4.2.0",
        "warning": "^3.0.0"
      }

    安装了react-router-domnpm会解析并安装上述依赖包。可以看到,其中包括react-router

    1. 所以,回到最开始的写法。基于浏览器环境的开发,写法1就可以了。

    参考链接:

    ReactTraining/react-router#4648
    https://github.com/ReactTraining/react-router/blob/master/packages/react-router/README.md

    展开全文
  • 先说一下React-router4的使用 要想使用React-router4,需要引入两个东西, React-router和React-router-dom React-router:React-router提供了一些router的核心api,...React-router-dom:所以React-router-do...

    先说一下React-router4的使用

    要想使用React-router4,需要引入两个东西,

    React-router和React-router-dom

    React-router:React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它不能直接进行Dom操作

    React-router-dom:所以React-router-dom顾名思义就是进行React-router的dom操作了,提供的api有BrowserRouter, Route, Link等

     

    那么如何使用呢?小编虽然在当时升级V4的过程中踩了不少坑,但是在解决后不得不说此次的升级对比V3还是方便了很多

    回到话题,先说如何使用V4

    一、React-router-dom中的BrowserRouter与HashRouter

    BrowserRouter与HashRouter是包裹在最外层的,让整个组件成为一个路由组件,

    他们的区别在于使用HashRouter的时候你会看到这样的一个路径:      http://localhost:8080/#/home

    而在使用BrowserRouter的时候,路径是这样的:http://localhost:8080/home

    二者的区别一目了然吧,HashRouter带有一个#,

    原理其实就是使用HTML5 history API来使你的内容随着url动态改变的

     

    二、Route

    router其实就是控制路径对应显示的组件,经常会使用的是exact、path以及component属性

     

    三、Link与NavLink

     3.1、Link的主要的参数是to,如图是带有传参时的写法,如果不需要传参,则直接写路径即可

     

    3.2、NavLink

    它可以为当前选中的路由设置类名、样式以及回调函数等。使用如下

    exact用于严格匹配,匹配到/则不会继续向下匹配,to则是控制跳转的路径,activeClassName是选中状态的类名,

    我们可以为其添加样式。我们在/second后面添加1234来想路由中传递信息,这结合了上面Route中的/second/:id,

     

     

    四、match与Switch

    match是在使用router之后被放入props中的一个属性,在class创建的组件中我们需要通过this.props.match来获取match之中的信息。

    match中包含的信息如下。常常会获取里面的值进行使用

     

     

    Switch:Switch常常会用来包裹Route,它里面不能放其他元素,用来只显示一个路由。

     

     

    最后,其实写这么多也只是复习一下小编React-router4的区别,现在开始来说区别

    在V3中:

      1、集中式 router,没有React-router-dom(对应下1)

      2、通过 <Route> (使用 {props.children} )嵌套,实现 Layout 和 page 嵌套(对应下2)

      3、Layout 和 page 组件 是作为 router 的一部分()

      4、Dom操作是将整个Router进行操作的(对应下3)

      5、V3 中的 routers 规则是 exclusive,只能匹配一个路径(对应下4)

      6、在路由嵌套中,重复的页面容易都有一个重复的组件,这会导致不必要的请求,会重复消耗多余的流量(对应下5)

     

     在V4中:

      1、从React-router-dom中引入了BrowserRouter或HashRouter

      2、当 route 匹配时,子组件会被渲染到 <Route> 书写的地方

      3、进行Dom操作的是应用程序本身,而不是整个Router

      4、V3 中的 routers 规则是 exact ,多个 <Route>可以同时匹配和呈现 

      5、match 对象为我们提供了 match.params,match.path,和 match.url 等属性,解决了重复输入,重复渲染

     

    转载于:https://www.cnblogs.com/yspace/p/10105954.html

    展开全文
  • 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-...

       react路由

    (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-router-dom';

    import {renderRoutes} from 'react-router-config';

    3.新建三个主页面js文件

    home.js

    import React from 'react';

     

    export default function Home(){

       return (

          <div>

            <h1>这是主页</h1>

            <a href="/about">去about</a>

            <a href="/discover">去discover</a>

          </div>    

       )

    }

    about.js

    import React from 'react';

    import {Link} from 'react-router-dom';

    import {renderRoutes} from 'react-router-config';

    //变量的导出用export,而不是export default

    export const About = (props)=>{

       const route = props.route

       return (  

          <div>

            <h1>这是关于</h1>

            <a href="/">去home</a>

            <a href="/discover">去discover</a>

            <Link to="/about/my">关于我的</Link>

            <br />

            <Link to="/about/you">关于你的</Link>

            {/*使用renderRoutes方法继续渲染子路由,第二个参数可以进行传参*/}

            {renderRoutes(route.childrens,{user:'hello'})}

          </div>

       )

    }

    discover.js

    import React from 'react';

    import {Link} from 'react-router-dom';

    import {renderRoutes} from 'react-router-config';

     

    export default function Discover(props){

       const route = props.route

       return (  

          <div>

            <h1>这是发现</h1>

            <a href="/">去home</a><br />

            <a href="/about">去about</a><br />

            <Link to="/discover/earth">发现地球</Link>

            <br />

            <Link to="/discover/star">发现星星</Link>

            {renderRoutes(route.childrens)}

          </div>

       )

    }

    4.新建子页面js文件

    my.js

    import React from 'react';

     

    export default function My(props){

       return (  

          <div>

            <h1>这是关于我的</h1>

            <p>{props.user}</p>

          </div>

       )

    }

    you.js

    import React from 'react';

     

    export default function You(){

       return (  

          <div>

            <h1>这是关于你的</h1>

          </div>

       )

    }

    star.js

    import React from 'react';

     

    export default function Star(){

       return (  

          <div>

            <h1>这是发现星星</h1>

          </div>

       )

    }

    earth.js

    import React from 'react';

    //<p>{props.match.params.id}</p>

    export default function Earth(props){

       return (  

          <div>

            <h1>这是发现地球</h1>

           

          </div>

       )

    }

    5.配置route.js

    在src目录下新建文件夹route(名字自己随便取),然后在该目录下新建route.js文件,在route.js里进行文件的配置

    import Home from '../component/home'

    //注意非函数、非表达式等导入要用{}括住

    import {About} from '../component/about'

    import Discover from '../component/discover'

    import Earth from '../component/earth'

    import Star from '../component/star'

    import My from '../component/my'

    import You from '../component/you'

     const routes = [

       {

          path:'/',

          component: Home,

          exact:true

       },

       {

          path:'/about',

          component: About,

          childrens:[

            {

            path:'/about/my',

            component:My

            },

            {

            path:'/about/you',

            component:You

            }

          ]

       },

       {

          path:'/discover',

          component: Discover,

          childrens:[

            {

            path:'/discover/earth',

            component:Earth

            },

            {

            path:'/discover/star',

            component:Star

            }

          ]

       }

    ]

    export {routes}

     

    6.在index.js里渲染路由

    import React from 'react';

    import ReactDOM from 'react-dom';

    import * as serviceWorker from './serviceWorker';

    import { BrowserRouter} from "react-router-dom";

    import { renderRoutes } from "react-router-config";

    import './index.css';

    import {routes} from './router/route';

    // 使用renderRoutes方法渲染路由

    ReactDOM.render(<BrowserRouter>

                { renderRoutes(routes)  }

                </BrowserRouter>, document.getElementById('root'));

     

    serviceWorker.unregister();

     

    展开全文
  • (1)插件的选择(3选择react-router,4选择react-router-dom) react-router 为 React Router 提供核心路由功能,但是你不需要直接安装 react-router; 如果你写浏览器端应用,你应该安装 react-router-dom; 如果...
  • react-router和react-router-dom区别

    千次阅读 2019-01-22 15:28:07
    react-router-v4,我称之为“第四代react-router”,react-router和react-router-dom的区别是什么呢? 为什么有时候我们看到如下的写法: 写法1: import {Swtich, Route, Router, HashHistory, Link} from 'react...
  • React-Redux和React-Router入门Demo代码讲解 写在前面 基础框架 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;create-react-app脚手架新建项目,React-RouterReact-Redux。 简介 &amp;...
  • import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App...import {HashRouter,BrowserRouter} from 'react-router-dom' ReactDOM.render( <BrowserRouter&
  • router的时候我首先就是先在react-router的官网上去看她的官方文档,然后按照上面的教程来在自己的react工程中使用react-router,但是基本应该会遇到问题,原因就是我们在使用npm安装react-router的时候基本是4.x...
  • react-router和react-router-dom有什么区别? 使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由。在React中,常用的有两个包可以实现这个需求,那就是react-router和react-router-dom 那么...
  • 前言 需要注意的是,现在react-router已经到了V4版本了,并且官方说这是一个完全重写的版本。...$ yarn add react-router@3.0.5 @types/react-router@3.0.5 --dev 将App.tsx相关三个文件移动到 views下,并...
  • 继上一篇 基于react16 webpack3 搭建前端spa基础框架 react-router4种异步加载方式 继续讲解。 项目源码guthub地址:https://github.com/wangweianger/react16-webpack3.8-onepage-base-project ...
  • react-router-dom嵌套路由

    千次阅读 2019-08-29 16:49:28
    因为之前不是专门做react的所以对于react-router的关注也比较少,react-router有多个版本还衍生除了react-router-dom这些新的第三方库(老子学不动了o(╥﹏╥)o)。就拿最近的3.0和4.0来说吧,嵌套路由的方式完全不...
  • 在学习React 的过程中,当学习到路由的时候,就会发现 react-router 或者 react-router-dom 组件; 这是已经写好的,可以直接拿来使用的react 路由组件;   第一个问题: 有的时候我们会看到有些react 的学习的...
  • React-Router 的 Hooks 实现

    千次阅读 2019-11-08 07:35:52
    前言 Hooks大行天下之后,关于如何使用 Hooks,如何替代Redux实现状态...其实React-Router4.0版本已经是一两年前的产品了,作者发布4.X时候也明确说过,除非React有重大更新,不然他们不会过多改动React-Router的实...
  • 1、React-router与React-router-dom的API对比 React-router:提供了router的核心api。如Router、Route、Switch等,但没有提供有关dom操作进行路由跳转的ap; React-router-dom:提供了BrowserRouter、Route、Link...
  • react-router的browserHistory/react-router-dom的BrowserRouter刷新页面404问题解决
  • 一、React-Router和React-Router-dom的选择 React-Router React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api。 React-Router-dom React-route
  • 今天我把react-router 升级了一下, 在使用react-router-dom 是,子组件使用this.props.history 找不到了,看看官方文档,找了半天也没找到,因为我是在异步执行完后才跳转页面,需要用到push 或者replace,怎么办啊...
  • react-router 与 react-router-dom 通过路由配置匹配URL来执行对应的代码。 react-router 用法 通过<link to= “home” > 和 <route path = " /home" component ={home}>来进行路由的跳转和匹配 例子 在...
1 2 3 4 5 ... 20
收藏数 22,925
精华内容 9,170
关键字:

4 react-router3