3 react route_react react route 优化 - CSDN
  • React Route 路由跳转

    千次阅读 2018-01-10 18:06:09
    1. 现在./src/index.js中定义路由 // npm run dev ReactDOM.render( {/* 1. 未登录,需要先判断然后跳转到登录页面*/} {hashHistory.push('/login/')} {/*2.登录页面和主页的路由*/} ...

    1. 现在./src/index.js中定义路由

    // npm run dev
    ReactDOM.render(
        <div>
            {/* 1. 未登录,需要先判断然后跳转到登录页面*/}
            {hashHistory.push('/login/')}
            {/*2.登录页面和主页的路由*/}
            <Router history={hashHistory}>
                <Route path="/login/(:path)" component={Login}/>
                <Route path="/app/(:path)" component={APP}/>
            </Router>
        </div>,
        document.getElementById('app')
    );

    2. 在主页(app.js)中定义主页的组件间的路由

    render() {
            return (
                <div style={{width:'100%',height:'100%'}}>
                    <LJMenu menuList={this.state.menuList} callback={this.handleChange}/>
                    <div className='center'>
                        <div className='sider'>
                            <Side menuList={this.state.sideList}/>
                        </div>
                        <div className='content'>
                            <Router history={hashHistory}>
                                <Route path="/"/>
                                <Route path="/detail/(:path)" component={Detail}/>
                                <Route path="/about/(:path)" component={About}/>
                                <Route path="/link/(:path)" component={Html}/>
                            </Router>
                        </div>
                    </div>
                </div>
            );
        }
    }

    3.然后利用push可以自有跳转

    hashHistory.push('/app/');

    注意:跳转的时候注意观察地址栏中的地址是否正常

    比如跳到登录页面的url包含login:  http://localhost:9992/#/login/?_k=heqntx

    比如跳到主页面的url包含app:     http://localhost:9992/#/app/?_k=ql8jty

    展开全文
  • React route中exact用法

    2019-10-28 16:31:22
    Route path='/goods' component={Goods} /> <Route path='/goods/:id' component={GoodDetail} /> 当匹配路由为/goods/:id,会匹配Goods组件和GoodDetail组件 但是我们期望得到GoodDetail 解决方法...

    在学习自己配置路由是遇到这个问题,就是

    <Route path='/goods' component={Goods} />
    <Route path='/goods/:id' component={GoodDetail} />

    当匹配路由为/goods/:id,会匹配Goods组件和GoodDetail组件

    但是我们期望得到GoodDetail

    解决方法有两种:

    1. 使用switch组件包裹route,类似switch语句一样匹配,从上线下找到第一个匹配的 Route,匹配中了之后,立刻就 break

    <switch>
        <Route path='/goods' component={Goods} />
        <Route path='/goods/:id' component={GoodDetail} />
    </switch>

    2. 使用exact属性

    这时可以使用exact来实现

    <Route path='/goods' exact component={Goods} />
    <Route path='/goods/:id' component={GoodDetail} />

    exact是Route下的一条属性,react路由会匹配所有匹配到的路由组价,exact能够使得路由的匹配更严格一些。

    exact的值为bool型,为true是表示严格匹配,为false时为正常匹配

    展开全文
  • react遍历Route处理

    2020-01-02 18:20:58
    遍历Route引发的React Route路由失效问题探究 route.js import Account from '../component/auth/admin/list'; import Role from '../component/auth/role/list'; import Estatebill from '../component/bill/...

    遍历Route引发的React Route路由失效问题探究

    route.js

    import Account from '../component/auth/admin/list';
    import Role from '../component/auth/role/list';
    import Estatebill from '../component/bill/estate/index';
    import Operabill from '../component/bill/opera/index';
    import Totalbill from '../component/bill/total/index';
    import LandlordC from '../component/contract/landlord/list';
    import Contract from '../component/contract/list';
    import StockholderC from '../component/contract/stockholder/list';
    import DeviceDtu from '../component/deviceDtu/index';
    import DtuLock from '../component/dtuLock/index';
    import ErrorPage from '../component/error/errorPage';
    import Estate from '../component/estate/index';
    import Store from '../component/estate/store/list';
    import Finance from '../component/finance/index';
    import Message from '../component/message/index';
    import Employee from '../component/person/employee/index';
    import Landlord from '../component/person/landlord/index';
    import Stockholder from '../component/person/stockholder/index';
    import FinanceIndex from '../component/system/financeindex';
    import SystemIndex from '../component/system/systemindex';
    import Userbill from '../component/user/bill/index';
    import Users from '../component/user/list';
    export const routeModules = {
        '/app/error': {
            curPath: './component/error/errorPage',
            component: ErrorPage
        },
        '/app/estate': {
            curPath: './component/estate/index',
            component: Estate
        },
        '/app/users': {
            curPath: './component/user/list',
            component: Users
        },
        '/app/finance': {
            curPath: './component/finance/index',
            component: Finance
        },
        '/app/role': {
            curPath: './component/auth/role/list',
            component: Role
        },
        '/app/account': {
            curPath: './component/dtuLock/index',
            component: Account
        },
        '/app/dtuLock': {
            curPath: './component/dtuLock/index',
            component: DtuLock
        },
        '/app/deviceDtu': {
            curPath: './component/deviceDtu/index',
            component: DeviceDtu
        },
        '/app/message': {
            curPath: './component/message/index',
            component: Message
        },
        '/app/stockholderC': {
            curPath: './component/contract/stockholder/list',
            component: StockholderC
        },
        '/app/contract': {
            curPath: './component/contract/list',
            component: Contract
        },
        '/app/landlordC': {
            curPath: './component/contract/landlord/list',
            component: LandlordC
        },
        '/app/systemS': {
            curPath: './component/system/systemindex',
            component: SystemIndex
        },
        '/app/financeS': {
            curPath: './component/system/financeindex',
            component: FinanceIndex
        },
        '/app/employee': {
            curPath: './component/person/employee/index',
            component: Employee
        },
        '/app/stockholder': {
            curPath: './component/person/stockholder/index',
            component: Stockholder
        },
        '/app/landlord': {
            curPath: './component/person/landlord/index',
            component: Landlord
        },
        '/app/store': {
            curPath: './component/estate/store/list',
            component: Store
        },
        '/app/estatebill': {
            curPath: './component/bill/estate/index',
            component: Estatebill
        },
        '/app/operabill': {
            curPath: './component/bill/opera/index',
            component: Operabill
        },
        '/app/totalbill': {
            curPath: './component/bill/total/index',
            component: Totalbill
        },
        '/app/userbill': {
            curPath: './component/user/bill/index',
            component: Userbill
        },
    };

    导入route.js组件

    import { routeModules } from './utils/route';
    import ErrorPage from './component/error/errorPage';
    import Users from './component/user/list';

    遍历Route:

    <Switch>
        <Route exact path="/app/" render={() => <Redirect to={Users}></Redirect>}></Route>
        {
            this.state.menuMudules.map((mitem) => {
                let mH_ = null;
                if (mitem.authModuleList && mitem.authModuleList.length) {
                    mH_ = mitem.authModuleList.map((citem) => {
                        console.log(citem.uri, routeModules[citem.uri].curPath);
                        return <Route path={citem.uri} key={citem.uri} exact component={routeModules[citem.uri].component}></Route>
                    });
                };
                return mH_;
            })
        }
        <Route component={ErrorPage}></Route>
    </Switch>

     

    展开全文
  • Router是React Router中用于配置路由信息的组件, 每当有一个组件需要根据URL决定是否渲染时,就需要创建一个React 1)Path 每个Route的值是一个组件, 当url和Route匹配时,Component 属性定义的组件就会被渲染。...

    Router是React Router中用于配置路由信息的组件, 每当有一个组件需要根据URL决定是否渲染时,就需要创建一个React

    1)Path

    每个Route的值是一个组件, 当url和Route匹配时,Component 属性定义的组件就会被渲染。例如:

    <Route path="/" component={Foo} />
    

    (2) render

    render 的值是一个函数,这个函数返回一个 React 元素。这种方式方便地为待渲染的组件传递额外的属性。例如:

    <Route path='/foo' render={(props) => { <Foo {...props} data={extraProps} />}}>
    </Route>

    Foo 组件接收了一个额外的 data 属性。

    (3)children

    children 的值也是一个函数,函数返回要渲染的 React 元素。 与前两种方式不同之处是,无论是否匹配成功, children 返回的组件都会被渲染。但是,当匹配不成功时,match 属性为 null。例如:

    <Route path='/foo' render={(props) => {
     <div className={props.match ? 'active': ''}>
      <Foo {...props} data={extraProps} />
     </div>
    }}>
    </Route>

     如果 Route 匹配当前 URL,待渲染元素的根节点 div 的 class 将设置成 active.

    转载https://www.cnblogs.com/SharkBin/p/10164787.html

    展开全文
  • react-route

    2017-06-28 23:15:33
    首先,我们来说一下react路由是做什么的呢? 我们经常会看到类似于微信下面的tab切换吧!像这种效果在react中就可以用路由实现。 在webpack搭建的环境中,我们需要用命令安装路由 Installation | 安装npm install ...
  • React的App.js文件中设置路由跳转标签时如果主界面Home的<Route/>标签没有设置exact属性,在点击<Route/>标签进入对应的界面时,Home界面的内容也会显示;如下所示 界面路由代码: <Route exact...
  • react-route嵌套路由

    2019-04-14 09:29:03
    嵌套路由的原理: 在任何组件中,都能使用route
  • 1 Switch组件只会渲染匹配上的 第一个【如果多个路由被匹配上了!!】 2 填写 组件名【不是字符串形式】 到 Route组件的 component ...import React from 'react'; import { BrowserRouter as Router, Switch,...
  • 实现简易版 React Route

    2020-03-03 01:56:02
    实现简易版 React Route 我们都知道 React中,一切皆组件。Router的使用就是引入一个个组件,非常方便。常见的路由组件有这些: Link 路由链接 Route 基本路由 Switch 独占路由 Redirect 重定向组件 PrivateRoute ...
  • react router给Route组件设置自定义属性

    千次阅读 2018-06-11 13:33:51
    当使用Route在页面内做跳转时,有时想要传一些自定义属性到子路由组件中,而常用的&lt;Route path={xxx} component={Component} test={123}/&gt;这种方式设置test属性是无效的,因此需要用到Route的第二种...
  • React Route打开新窗口出现Not Found

    千次阅读 2017-09-06 10:16:08
    React Router 是建立在 history 之上的。有三种记录路由历史记录的方式:hashHistory、browserHistory和createMemoryHistory。 hashHistory 使用 URL 中的 hash(#)部分去创建形如 example.com/#/some/path 的路由...
  • 如题,react-router中Route组件的children是一个特殊的存在,在大多数场景下我们大多会使用component或者render,下边来说说这个特殊的children~~不过在这之前先说说react-router中的Route组件… Route组件 基本...
  • 1. 我们再使用react-route的时候 经常会用到 chaildren component render,区别如下: component &&render区别 参考:https://www.jianshu.com/p/a2a9b469a422
  • What’s React-Router React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。 前言 继续上一篇文章的延续<<React教程之create-react-...
  • react-route和children

    千次阅读 2018-11-23 11:19:03
    import {BrowserRouter as Router,Route,Link} from 'react-router-dom' const Basic = () =&gt; (  &lt;Router&gt;  &lt;div&gt;  &lt;ul&gt;  &lt;li...
  • import {Link, Route, Switch, Redirect, withRouter, RouteComponentProps} from "react-router-dom"; /** path of router */ export interface IRoutePath { a: string; b: string; c: string; d: string; e...
  • react路由基础(Router、Link和Route

    万次阅读 2017-05-30 20:27:45
    Facebook对react进行持续的改进,路由作为其中最重要的一部分,在4.0版本对其进行了大量的优化,总的来说,简单易用! 之前使用react路由的时候,我们引入的是react-router包。 现在改版之后,我们引入的包是react...
  • 最新内容请在github阅读...下面是react-router的match方法中的renderProps属性的内部签名: 其中renderProps包含routes,params,location,components,router,matchContext属性。 { //renderProps包含routes对象 rout
  • reactJS之react-route

    千次阅读 2015-05-05 16:40:38
    用嵌套的来定义视图的层级,当Route激活时提供React的元素来处理这些Route React Router会根据URL来匹配最深层级的Route, 然后激活嵌套在UI里面的该Route的整个分支 你只需简单使用组件来渲染激活的子Router var App...
1 2 3 4 5 ... 20
收藏数 11,999
精华内容 4,799
关键字:

3 react route