• React多级路由 React路由设置 新建一个Home.jsx文件 和Home.css文件 css文件内容就不写了 Home 文件内容如下 为了解决点击Link时,路由变化而子路由页面未变化,所以需要在窗口中加入key属性。 import "./Home....

    React多级路由 React子路由设置

    1. 新建一个Home.jsx文件 和Home.css文件 css文件内容就不写了 Home 文件内容如下
      为了解决点击Link时,路由变化而子路由页面未变化,所以需要在窗口中加入key属性。
    import "./Home.css"
    import React,{ Component } from "react";
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    
    
    import Child1 from '../../components/child1/Child1';
    import Child2 from '../../components/child2/Child2';
    
    
    class Home extends Component{
        render (){
            return (
                <div className="home">
                    <aside className="home_menu">
                        <button><Link to={`${this.props.match.path}/child1`}>子路由1</Link></button>
                        <button><Link to={`${this.props.match.path}/child2`}>子路由2</Link></button>
                    </aside>
                    <section className="home_section" key={this.props.location.key}> 
                        <Router>
                            <Route path={`${this.props.match.path}/child1`} component={Child1} />
                            <Route path={`${this.props.match.path}/child2`} component={Child2} />
                        </Router>
                    </section>
                </div>
                
            )
        }
    }
    
    export default Home
    

    2.新建子路由1页面Child1.jsx:

    import "./Child1.css"
    import React,{ Component } from "react";
    class Child1 extends Component{
        render(){
            return(<div className="Child1">child1</div>)
        }
    }
    
    export default Child1
    

    3.新建子路由2页面Child2.jsx:

    import "./Child2.css"
    import React,{ Component } from "react";
    class Child2 extends Component{
        render(){
            return(<div className="child2">child2</div>)
        }
    }
    
    export default Child2
    

    3.新建一个router文件夹,在文件夹中新建index.js, 如果需要react jsx的写法 需引入react
    需要安装 react-router-dom 安装命令: npm i -S react-router-dom 引入所需配置。直接上代码:

    //引入react jsx写法的必须
    import React from 'react'; 
    import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'; //需要安装  npm i -S react-router-dom
    
    
    //引入需要用到的页面组件 
    import Login from '../views/login/Login';
    import Home from '../views/home/Home';
    
    function router(){
        return (
            <Router>
                <Switch>   
                    <Route exact={true}  path="/" component={Login} /> {/**exact 防止混路由混合   如:输入127.xx.xx.xx/home 中有/login页面*/}
                    <Route path="/home" component={Home} />
                </Switch>
            </Router>
        )
    }
    
    export default router;
    

    4.然后在react项目根目录中的index.js中(入口文件)引入路由文件夹(router)中的index.js。到此完成子路由的配置。 代码如下:

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    
    import './index.css';
    // import App2 from './App';
    import Router from './router/index'
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<Router />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();
    

    最后直接上效果:
    在这里插入图片描述

    展开全文
  • React路由基本用法

    2019-01-28 10:39:53
    React路由基本用法 1.React Router4.0基本概述: React Router4.0(以下简称 RR4)遵循React的设计理念,即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编程...

    React路由基本用法

    1.React Router4.0基本概述:

    React Router4.0(以下简称 RR4)遵循React的设计理念,即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编程简单来讲就是你只需要关心做什么,而无需关心如何去做,可组合性的特点。

    RR4 采用单代码仓库模型架构(monorepo),这意味者这个仓库里面有若干相互独立的包,分别是:

    • react-router React Router 核心
    • react-router-dom 用于 DOM 绑定的 React Router
    • react-router-native 用于 React Native 的 React Router
    • react-router-redux React Router 和 Redux 的集成
    • react-router-config 静态路由配置的小助手

    2.react-router-dom怎样使用?

    1.react-router-dom和react-router的关系:

    在 React 的使用中,我们一般要引入两个包,react 和 react-dom,那么 react-router 和react-router-dom 是不是两个都要引用呢?其实他们两个只要引用一个就行了,因为react-router-dom里面依赖于react-router("react-router-dom包含react-router"的关系),如下图所示;

    2.react-router-dom和react-router的区别:

    它们之间的不同之处就是react-router-dom比react-router多出了 <Link> <BrowserRouter> 这样的组件;

    3.react-router-dom的基本用法:

    react-router-dom的API在网上能搜索到一大堆,这里不啰嗦了;直接上怎么用?

    1.先用create-react-app脚手架工具,初始化项目名为react19的项目,完成目录结构如下:

    2.然后使用命令yarn add react-router-dom或cnpm install react-router-dom安装react-router-dom依赖包并在App.js中初始化路由配置;

    基本总结:

    1.<BrowserRouter>组件:Router是BrowserRouter的别名,它表示BrowserRouter本身。而BrowserRouter使用了H5 Histroy API高阶路由组件;

    2.<Switch>组件:它的作用是只渲染出第一个与当前访问地址匹配的<route>和<redireact>组件;

    3.<Route/>组件:当地址URL和path属性设置的值匹配时,渲染出相应的UI组件界面;

    4.<HashRouter>组件:它的作用主要利用Hash值的原理进行地址—UI匹配,在RR4中并没有抛弃,但是不建议使用;熟悉vue-router的可以知道,它跟vue-router匹配原理一样;

    5.<NavLink>组件:主要用于导航拥有激活状态准备的;它和Link的路由匹配效果一致;不同的是NavLink有状态标记,Link无状态标记,如下面效果实现就建议使用NavLink;

    NavLink用法如下:

    <NavLink to="/one" activeClassName="actived"></NavLink>

    以上是React-Router-Dom的基本组件和API解释,详情请百度之;

    3.通过运行npm start命令就可以启动服务器查看效果:

     

     

    展开全文
  • 前言:在做项目的时候,花费了几天的时间才把路由问题解决,但是对react的几种路由的区分和使用,我现在也是整的还不清楚。 1、安装相关的包: (1)npm install --save-dev react-router (2)npm install --...

    前言:在做项目的时候,花费了几天的时间才把路由问题解决,但是对react的几种路由的区分和使用,我现在也是整的还不清楚。

    1、安装相关的包:

    (1)npm install --save-dev react-router

    (2)npm install --save-dev react-router-dom

    (3)npm install --save react-router-config

    在package.json中查看版本

             

    2、配置路由

    (1)新建路由文件 route.js

              

    代码如下所示:

    import React from 'react';
    
    import FyOfficalHomePage from './components/FyOfficalHomePage/FyOfficalHomePage';
    
    import FyAdvantage from './components/FyAdvantage/FyAdvantage';
    import FyAdvantageOne from './components/FyAdvantage/FyAdvantageOne/FyAdvantageOne';
    import FyAdvantageTwo from './components/FyAdvantage/FyAdvantageTwo/FyAdvantageTwo';
    import FyAdvantageThree from './components/FyAdvantage/FyAdvantageThree/FyAdvantageThree';
    
    import FyCommonProblem from './components/FyCommonProblem/FyCommonProblem';
    
    import FyCompanyPosition from './components/FyCompanyPosition/FyCompanyPosition';
    
    const routes = [
        {
            path: '/',
            component: FyOfficalHomePage,
            exact: true,
        },
        {
            path: '/advantage',
            component: FyAdvantage,
            children: [
                {
                    path: '/advantage/advantage1',
                    component: FyAdvantageOne
                },
                {
                    path: '/advantage/advantage2',
                    component: FyAdvantageTwo
                },
                {
                    path: '/advantage/advantage3',
                    component: FyAdvantageThree
                }
            ]
        },
        
        {
            path: '/faq',
            component: FyCommonProblem
        },
        {
            path: '/map',
            component: FyCompanyPosition
        },
    ];
    
    export {routes}

    :(1)exact:

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

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

                    如在exact为true时,’/link’与’/’是不匹配的,但是在false的情况下它们又是匹配的。

           (2)嵌套子路由children,这里说明一下不一定必须用children,你可以用其它的词代替。但是我个人觉得,children辨识度                  高,在后面使用的时候也不会搞混。

    (2)index.js文件

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    
    import registerServiceWorker from './registerServiceWorker';
    
    import { routes } from './routes';
    import { BrowserRouter } from 'react-router-dom';
    import { renderRoutes } from 'react-router-config';
    
    ReactDOM.render(
        (<BrowserRouter>
            {renderRoutes(routes)}
        </BrowserRouter>),
        document.getElementById('root')
    );
    registerServiceWorker();
    

    (3)组件中使用

    import React from 'react';
    import { Link } from 'react-router-dom';
    
    export default class NavigationBar extends React.Component {
        constructor(props) {
            super(props);
            this.state = {}
        }
        
        render (){
            return(
                <div>
                    <ul>
                        <li>
                            <Link to="/">首页</Link>
                        </li>
                        <li>
                            <Link to="/advantage">advantage</Link>
                        </li>
                    </ul>
                </div>    
            )
        
        }
    }

    子路由(子页面):

    import React from 'react';
    import { Link } from 'react-router-dom';
    import { renderRoutes } from 'react-router-config'
    
    export default class FyAdvantage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                route: props.route,
            }
        }
    
        render (){
            const route = this.state.route;
            return(
                 <div>
                    {renderRoutes(route.children)}
                    <div>
                        <ul>
                            <li>
                                <Link to="/advantage/advantage1">advantage1</Link>
                            </li>
                            <li>
                                <Link to="/advantage/advantage2">advantage2</Link>
                            </li>
                            <li>
                                <Link to="/advantage/advantage3">advantage3</Link>
                            </li>
                        </ul>
                    </div>
                </div>    
            )
        }
    }

    注:(1)接受通过props传过来的route

           (2){renderRoutes(route.children)}是子页面的入口,子页面是在原来的页面的基础加载的,

                    例:A是父页面,B和C是A的子页面。B、C是A的一部分,在加载B或C页面的时候,父页面A的内容依然存在,B或C                       的页面内容通过入口渲染在A页面中。 

    展开全文
  • react中路由-嵌套路由-动态生成路由 react路由 卡了一上午,我的理想化出来了 react-router-dom它分为一下几种情况: BrowserRouter 启动history模式的路由 Route 路由本由,通过path进行组件的渲染 Redirect ...

    react中路由-嵌套路由-动态生成路由

    react的路由 卡了一上午,我的理想化出来了

    react-router-dom它分为一下几种情况:

    • BrowserRouter 启动history模式的路由
    • Route 路由本由,通过path进行组件的渲染
    • Redirect 重定向路由 通过to属性进行反杀
    • Switch 当匹配到第一个路径相符合的路由的时候就不会往下找了
    • Link 类似于a标签进行路由导向
    • navLink 也是会生成a标签进行连接,跟link有差别 但是我还没有探究
    • 。。。。还有一些其他的方法没有探究

    需求描述

    import home from 'pages/Home.jsx'
    import record from 'pages/Record.jsx'
    import feedBack from 'pages/FeedBack.jsx'
    const router = [
        {
            path:'/record',
            component:record
        },
        {
            path:'/',
            component:home,
            redirect:'/feedBack',
            children:[
                {
                    path:'/feedBack',
                    component:feedBack
                }
            ]
        },
    ]
    //如果熟悉vue的小伙伴会明白想干什么,主要是在/路径下生成home但是匹配到/之后会重新定义到/feedBack路径上去,此时的home和feedBack组件是共存的,也就是常说的layout和contain是共存的,如果是vue的话很简单,很好做,但是react的路由我*****
    

    实现方法

    如上我已经对路由数据进行了构建,下面我只需要一个方法生成他

    function generateRoute(value){
        if(value.children){
            return (
                    <Switch  key={value.path}>
                       <Redirect exact from={value.path} to={value.redirect} />
                       <Route key={value.path} path={value.path}>
                            <value.component>
                                {
                                    value.children.map(item=>{
                                        return generateRoute(item)
                                    })
                                }
                            </value.component>
                        </Route>
                    </Switch>                
                )
            }
        return <Route key={value.path} path={value.path} component={value.component} />
    }
    function app(){
        return (
            <Switch>
                {
                    router.map(item=>{
                        return generateRoute(item)
                    })
                }
            </Switch>
        )
    }
    

    在一系列的转化下他会生成这个东西

    <Switch>
          <Route path='/record' component={record}></Route>
          <Switch>
               <Redirect exact from='/' to='/feedBack'></Redirect>
               <Route path='/'>
                    <Home>
                        {
                            <Route path='/feedBack' component={feedBack} />
                        }
                    </Home>
               </Route>
          </Switch>
    </Switch>
    //在这里我们看到了<Home>组件,这样在Home组件中我们可以通过this.props.children来获取传入的组件,类似于vue的插槽
    

    我所遇到的坑

    卡了我一个小时的东西只有一个/

    //熟悉vue路由的小伙伴都知道,子路由的path是不会加/的
    const router = [
        {
            path:'/record',
            component:record
        },
        {
            path:'/',
            component:home,
            redirect:'/feedBack',
            children:[
                {
                    path:'/feedBack',//就是这里vue的话会写成feedBack,但是react会/
                    component:feedBack
                }
            ]
        },
    ]
    //就这样一个小时  我很开心
    
    展开全文
  • 接下来谈一谈react-router4中如何写嵌套路由。因为在前几篇博客里写了用react-router实现单页面跳转,但是没有测试嵌套路由,导致嵌套的部分无法实现正常跳转,现已改正,并来说一说它的来龙去脉。 前言:本人用的...

    因为本人也是react的初学者,也是在一遍摸索着一边解决一些小的问题来分享出来,希望大家能共同交流。

    接下来谈一谈react-router4中如何写嵌套路由。因为在前几篇博客里写了用react-router实现单页面跳转,但是没有测试嵌套路由,导致嵌套的部分无法实现正常跳转,现已改正,并来说一说它的来龙去脉。

    前言:本人用的react-router是4.3.1的版本,可以从package.json中去查看项目安装引用的包。

    1、react-router3中,页面的嵌套是通过<Route>标签的嵌套实现的。正如我最开始写的,利用Route标签实现MyView和Mydocument两个组件的嵌套。

    但是上述的写法在v4版本下运行时,地址栏中的url会改变,但是组件不会显示出来。

    2、所以需要将上述写法改成v4,React Router 4 不再提倡中心化路由。取之的是路由存在于布局和 UI 之间。

    router/index.js中:

    component/MyView.js中

    在V4版本中,也可以写成中心化路由的形式,如下,注意外层标签不再是v3版本中的<Route>,而是引入的组件名称MyView,通过this.props.children属性来获取被嵌套的组件。

    router/index.js:

    component/MyView.js:

     

    展开全文
  • react-动态路由

    2020-01-14 10:11:29
    react-动态路由
  • react-router v4 路由跳转 react-router v4 路由传参 使用 withRouter withRouter高阶组件,提供了history让你使用~ import React from "react"; import {withRouter} from "react-router-dom"...
  • 如果你项目当中用的是react全家桶,react + react-router + redux + axios + antd类似这样的组合的话那么做路由的话就是react-router, 首先要配置路由,关于react-router路由配置请看: ...而后可通过 this.p...
  • React-router 4路由监听

    2019-06-10 12:33:07
    React Router4是一个纯React重写的包,现在的版本中已不需要路由配置,一切皆组件。 问题出发点 最近在一个新的H5项目中使用了react router 4 ("react-router-dom": "^4.2.2"),项目中的一部分页面是需要给app客户端...
  • React-路由的使用

    2019-06-26 09:18:03
    1.安装React路由 cnpm i --save react-router-dom 2.创建一个新的router.js文件,并在App.js中导入这个路由文件 3.在router.js文件中粘贴官方的第一个路由案例; import React from "react...
  • 写在前面:react-navigation已经从1.0更新至2.0了,所谓是很快速啊。1.下载并导入这个插件:2.在你想调用的地方开启路由重置功能,(这里我触发点击事件)routeName:是你导航进入的根页面的名字。index:0代表根...
  • React系列之--项目中React 路由搭建demo关于react-router网上有很多介绍,在这里必要唠叨,其中在项目中react-router和react-router-dom功能是一样的,引用一个就可以了。1、react-router4.0以上的介绍。 发现一篇...
  • 一、动态路由  我们通过配置基本路由,可以实现页面间的切换,但是如果在一个页面中有一列表标题,我们点击各个标题,就能进入到此标题所表示的内容页面中,这该如何实现呢,下面就要用到我们的动态路由了,实际...
  • 此篇文章是基于react路由系列01___ 在react脚手架里使用React-router(简单入门)和react路由系列02___ 二级路由上写的,如果你有路由基础,可以直接看这篇文章,如果没有路由基础,则建议先看前两篇文章。 react路由...
  • 此篇文章是基于react路由系列01___ 在react脚手架里使用React-router(简单入门)和react路由系列02___ 二级路由上写的,如果你有路由基础,可以直接看这篇文章,如果没有路由基础,则建议先看前两篇文章。 react路由...
  • react路由鉴权 / 路由守卫 首先路由鉴权就是在访问一个页面时判断是否需要权限,比如电商App结算账单的时候需要登录用户的账号 路由守卫就是在该页面需要登录用户的情况下去判断是否登录 总的来说就是 判断权限是...
  • 静态路由 传统的路由一般都是静态路由,像Express等框架,使用的都是静态路由React.render(( <Router> <Route path="/" component={App}> <Route path="about" component={About} /> <...
  • React模板创建及路由配置react模板创建1、全局安装:npm install -g create-react-app2、创建react 模板create-react-app 你的项目名3、进入你的项目模板cd 你的项目名4、运行你的项目npm start...
  • react路由的配置: 1、找到官方文档 https://reacttraining.com/react-router/web/example/basic 2、安装 cnpm install react-router-dom --save 3、找到项目的根组件引入react-router-dom import { ...
  • 欢迎大家关注一下 基于React-naive开发的“IT喵~”项目。技能GET、互联网资讯、程序员相亲、GitHub监控。。。 Github地址:https://github.com/cbamls/kitty_front效果图内置的Navigators起react-navigation 包含了...
1 2 3 4 5 ... 20
收藏数 23,611
精华内容 9,444