您的位置:时时app平台注册网站 > web前端 > react路由相关总结react-router【彩世界网址】

react路由相关总结react-router【彩世界网址】

2019-11-03 04:39

在页面中给一个按钮绑定绑定跳转,如果跳转到项目的路由,引入react-router的Link

    2.4:不使用Link,在函数内直接操作router

五.路由的参数传递

即在所添加的路由路径后面加/:参数名

实例:

第一步:加一个类型和数量  <Route path="/guoji/:type/:count" component={Guoji}></Route>

第二步:去nav,js中传递数据  <Link to={"/guonei/${'guoji'}/${'20'}"}><Link>

以上即把参数传递给了国际这个组件页面

方法一:

  路由配置:路由匹配的规则

第二步:

1.在app.js(即:你的主入口文件)通过import引入 代码为:

import { Router,Route,hashHistory,IndexRoute } from "react-router"

2.引入之后通过路由对象开始编码,此步骤一般在你引入react-router那个文件下操作(app.js)

    然后在引入导航导过去的每个页面组件 也是用import引入

    如引入index首页 即: import Index from "./pages/index"  //引号里是该组件的路径

以导航栏为例:PCIndex表示已经写好的导航样式组件

                       <Router  history={hashHistory}>

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

                                     <IndexRoute component={Index}><IndexRoute> //表示默认加载index页面

                                      <Route path="/guoji" component={Guoji}></Route>

                                      <Route path="/guonei" component={Guonei}></Route>

                              <Route>

                         <Router>

 target="_blank"

 

第一步:可以先封装好一个htttp请求

//封装get请求如下

export function httpGet(url){

     var result = fetch(url,{

           method:"GET"

      })

      return result;

}

//post请求如下

export function httpPost(url,params){

  var result = fetch(url,{

    method:"POST",

    headers: {

'Accept': 'application/json, text/plain, */*',

'Content-Type': 'application/x-www-form-urlencoded'

},

    // 此方式接受的参数类型

    // 需求数据:name=iwen&age=20

    // 我们希望的是{ name:iwen,age:20 }

    body:parseParams(params)

  })

  return result;

}

function parseParams(obj){

  var result = '';

var item;

for (item in obj) {

    // { name:iwen,age:20 }

    // &name=iwen&age=20

result = '&' item '=' encodeURIComponent(obj[item]);

}

if (result) {

result = result.slice(1);

}

  return result;

}

可以把上述所有代码保存到一个http.js中以后再使用网络请求时直接调用即可

跳转到外链:

  1. IndexLink & Link (active状态之争)

三.react-router所包含哪些常用对象

Router:包裹路由的父容器

Route:子组件加载的容器

hashHistory:处理路由跳转历史

IndexRoute:路由默认加载的选项(路由嵌套中)

Link:路由跳转

方法二:

  2.onLeave:与onEnter类似,nextState属性不同

第三步:

路由写好后去nav.js中添加Link就可以实现跳转 如下代码:

首先:引入Link  代码为  import {Link} from "react-router"

<ul>

      <li><Link to={"/"} >首页<Link></li>

      <li><Link to={"/guoji"}>国际<Link></li>

      <li><Link to={"/guonei"}>国内<Link></li>

</ul>

 target="_blank"

 

以上即可完成路由集其作用的基本操作,求赞哈哈啊哈!!!!

window.location.href = 'https://你的url'

      注意:push与replace的区别,一个是添加,一个是替换,历史记录中被替换的已经不存在了,所以浏览器回退不到替换前的页面。

第二步:在guoji组件中引入http请求(以get为例)

1.  import { httpGet } from "../../http/http"

2.先初始化这个state数据 如下:

constructor(){

    super();

    this.state = {

      news:{

        result:{

          data:[]

        }

      }

    }

  }

2.  然后在componentDidMount里进行网络请求 如下代码:

componentDidMount(){

    httpGet("")

    .then(res => {

      return res.json()

    })

    .then(data => {

      this.setState({

        news:data

      })

    })

  }

  1. 使用map遍历这个数据对象

     news.result.data.map((ele,index) =>{

           return <li> {ele.title} </li>

     })

}

还要加一个rel:

    1. require.ensure中分割的组件,需要使用module.export 暴露出来

第四步:

在要把显示这几个页面的地方添加 {this.props.children}即可

使用<Link to="/download">下载</Link> 形式跳转,如果希望页面从新页面打开,加 

    static contextTypes = {
        router: PropTypes.object
    }
    handleClick = (e) => {
        e.stopPropagation();
        e.preventDefault();
        this.context.router.push('login');
                //...

二.react项目中安装路由react-router

安装:npm install --save react-router@3.x  

这里安装的是3.x版本

 

     2.3:to=函数,注册到路由跳转事件中,每一次路由变化,都会执行该函数,并经最新的location作为参数

第一步:

安装:npm install --save react-router@3.x  

<a href="https://internal.zhongwentoutiao.com/admin/news_list" target="_blank" rel="noopener noreferrer">管理员入口</a>

   

this.props.history.push('/download')

 

一.路由的作用

搭建单页面应用

注意:如果使用了React或者Vue想处理SEO问题,将会变得麻烦一些。

SEO:百度搜索引擎优化

如果跳转到一个外链,使用a标签,如果希望页面从新页面打开,除了加target,

    一旦添加onChange属性,则子路由通过onChangeHook决定,Link不起作用

六.通过网络请求展示数据

 

 七、每一个Route组件的属性

四.如何在一个react项目中使用react-router

import PropTypes from 'prop-types';
export default class Header extends Component {
    static contextTypes = {
        router: PropTypes.object.isRequired,
    }
    constructor(props) {
        super(props);
        this.state = {
            keyword:"",
            channelList:[]
        };
        this.handleToSearch=this.handleToSearch.bind(this);
    }
    handleToSearch() {
        if(this.state.keyword){
            this.context.router.history.push(`/news_list/search/${this.props.channelId}/${this.state.keyword}`)
        }
    }
    render() {
        return (
               <div className="wrapper">
                  小星星小星星
               </div>
        );
    }
}
render((
    <Router history={ hashHistory }>
        <Route path="/" component={ App }>
            <IndexRoute component={ IndexApp } />
            <Route path="select" component={ Select }></Route>
            <Route path="found" component={ Found }></Route>
            <Route path="follow" component={ Follow }></Route>
            <Route path="my" component={ My }>
                <Route path=":myname" component={ MyName }></Route>
                <Route path="mysex" component={ MySex }></Route>
            </Route>
        </Route>
    </Router>
), document.getElementById('root'));

react中实现在js中内部跳转路由,有两种方法。

    changeRouter = () => {
        console.log(this.props)
        // this.props.router.push('/follow');
        // this.props.router.push({
        //     pathname:'/follow',
        //     state:{name:'xxx'},
        //     query: {foo: 'bar'}
        // })

        // this.props.router.replace('/follow');
        this.props.router.replace({
            pathname: '/follow',
            query: {foo:'bar'}
        })
    }

    3.1 contextTypes

  每一个Route都只是一个组件,子路由就是 this.props.children 里面的组件,Route通过匹配URL决定显示哪一个子路由

   缺点:这种形式,没有参与到路由机制中,onEnter,onLeave 等HOOK都无法使用

 彩世界网址 1

    3.2 引入browserHistory,hashHistory

前言:

<Link to={location => ({ ...location, query: { name: 'ryan' } })}>
  Hello
</Link>

  这里给与IndexRoute组件 -- 若希望直接使用4个其中一个则使用IndexRedirect

 

import {browserHistory} from 'react-router';
//...
    handleClick = (e) => {
        e.stopPropagation();
        e.preventDefault();
        browserHistory.push('login')
        //...

  本文为个人学习react-router的总结。包括路由基础配置,跳转,权限管理,组件与路由配置的关系,代码分割。欢迎交流指导。

  nextState的属性

  若你只想为 <Link to="/my/:myname" >myname</Link> 这一个按钮添加active样式,就可以为 <Link to="/my" >Mypage</Link> 使用IndexLink

二、默认路由(IndexRoute )

render((
    <Router history={ browserHistory }>
        <Route path="/" component={ App }>
            <IndexRoute component={ IndexApp } />
            <Route path="select" component={ Select }></Route>
            <Route path="found" component={ Found } onEnter={onEnterHook} onLeave={onLeaveHook}></Route>
            <Route path="follow" component={ Follow }>
            </Route>
            <Route path="my" component={ My } >
                <Redirect from="name/xxx" to='mysex' />

                <Route path="name/:myname" component={ MyName }>
                    <Route path="info" component={ MyInfo } ></Route>
                </Route>
                <Route path="mysex" component={ MySex } />
            </Route>
            <Redirect from="*" to='/' />
        </Route>
    </Router>
), document.getElementById('root'));
render((
    <Router history={ hashHistory }>
        <Route path="/" component={ App }>
            <Route path="select" component={ Select }></Route>
            <Route path="found" component={ Found }></Route>
            <Route path="follow" component={ Follow }></Route>
            <Route path="my" component={ My }>
                <Route path=":myname" component={ MyName }></Route>
                <Route path="mysex" component={ MySex }></Route>
            </Route>
        </Route>
    </Router>
), document.getElementById('root'));
<IndexLink to="/my" >Mypage</IndexLink>
<Link to="/my/:myname" >myname</Link>

  1.路由配置 & 显示路由组件的view(类比angular的ui-view)

 <li><Link to={{pathname:"/select", hash:'#ahash', query:{foo: 'bar', boo:'boz'}, state:{data:'miao'}  }} activeClassName="GlobalNav-active">精选</Link></li>

 

 

      新版本:router被放置在this.props中,通过this.props.router可以获取路由

   getComponent(nextState, callback)  &&  getComponents(nextState, callback) 

module.exports = xxx; //可获取xxx组件
export default xxx // 不可获取xxx组件 

一、路由基础

    若不使用Link,有两种方法

<Route path="follow" component={ Follow }></Route> // this.props.children;
<Route path="follow" component={ {main:Follow, sidebar: Sidebar} }></Route> // const { main, sidebar } = this.props;

 

 八、另一种路由配置的方式

   异步加载组件,使用(需要加上 require.ensure([], (require) => {}) 实现代码分割

const onEnterHook = (nextState, replace /*,cb*//*若添加cb参数,钩子变成异步执行,cb返回之前,将发生阻塞*/) => {
    console.log('onenter', nextState);
    // replace // 是router.replace(),若访问者没有权限,则引导到其他页面
}

三、路由跳转   

   cb(err, component) 

  <IndexRedirect>:从父路由的目录开始重定向

   3.onChange(prevState, nextState, replace, callback?) ,用于子路由,

  <Redirect>:重定向到同等级的其他路由

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>

  2.跳转参数 to

 

  view:放置路由组件的地方(URL匹配了,然后对应的组件应该放到什么地方去),

<Link to="/my" >Mypage</Link>
<Link to="/my/:myname" >myname</Link>

   3.若不是Route组件,而是Route的子组件,则this.props.router === undefined

const selectRouter = {
    path:'select',
    component: Select
}
const foundRouter = {
    path:'found',
    component: Found
}
const myRouter = {
    path:'my',
    getComponent(nextState,cb) {
        cb(null, My)
    }
}
// import Follow from './components/Follow.js';
const followRouter = {
    path:'follow',
    getComponent(nextState,cb) {
        require.ensure([], (require) => {
            cb(null, require('./components/Follow'))
        })
    }
    // getComponent(nextState, cb) {
    //     cb(null, Follow)
    // }
}
const rootRouter = {
    path: '/',
    component: App,
    // indexRoute: {component:IndexApp},
    childRoutes: [
        selectRouter,
        foundRouter,
        followRouter,
        // require('./components/Follow.index'),
        myRouter
        ]
}
// const rootRouter = {
//     path: '/',
//     component: App,
//     getIndexRoute(partialNextState, cb) {
//         cb(null,  {compoment:IndexApp});
//     },
//     getChildRoutes(location, cb) {
//         cb(null, [
//             selectRouter,
//             foundRouter,
//             followRouter,
//             myRouter
//         ])
//     }
// }
render(
    <Router history={browserHistory} routes={rootRouter} />,
    document.getElementById('root')
)

五、路由机制的权限

     2. getComponent,getComponents,getIndexRoute,getChildRoutes只是实现了异步加载,要实现代码分割还是要使用require.ensure

    进入该路由的某个子路由是触发,或者改变query,hash

四、重定向

  getComponent(nextState, cb) {
    require.ensure([], (require) => {
      cb(null, require('./components/Calendar'))
    })
  }

 

 六、组件与路由的一一对应关系,按需加载组件

  组件<App /> 的匹配路径是 ‘/', 有四个子路由,当前路由只是'/',那么<App />应该显示什么页面呢?

     2.1:通过 to=’xx/xx' 直接跳转 <Link to={`/my/${myname}/info`}>check my info</Link> 

   倘若有如下两个链接,正好URL是'/my/mioawwwww', 两个路由都匹配的了,那么就是两个都是active状态(相应地添加activeStyle,activeClassName的样式)

彩世界网址 2

class App extends PureComponent {
    render() {
        return (
            <div>
                <GlobalNav />
                { this.props.children } { /* this.props.children 是被嵌套在App的组件,相当于放子路由的View*/}
            </div>
        )
    }
}

      旧版本:由于router只用的context传递路由信息,因此每一个组件都可以轻易的通过this.context.router获取路由

 

  IndexLink是补充Link的,只要URL完整匹配'/my'的时候才会激活active状态

   

  1.onEnter

 

 

 

彩世界网址 3

   如果不使用IndexRoute组件,也还有一种投机取巧的方法,直接在 App组件中,使用  {this.props.children || <IndexApp />} ,在ui展示的层面上修改this.props.children为undefined的情况。

   代码分割的注意事项:

     2.2:to=对象,带参数跳转(pathname, query, hash, state(额外数据)),注意:这些参数都被存放到this.props.location中

   <Redirect from="name/xxx" to='mysex' /> 

本文由时时app平台注册网站发布于web前端,转载请注明出处:react路由相关总结react-router【彩世界网址】

关键词: