react-router 学习笔记_0

前端之家收集整理的这篇文章主要介绍了react-router 学习笔记_0前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言:

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

一、路由基础

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

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

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'));

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

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

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

二、默认路由(IndexRoute )

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

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

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'));

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

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

三、路由跳转  

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

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

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

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

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

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

  2.跳转参数 to

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

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

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

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

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

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

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

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

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

    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'}
        })
    }

四、重定向

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

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

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'));

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

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

五、路由机制的权限

  1.onEnter

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

  nextState的属性

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

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

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

    一旦添加onChange属性,则子路由通过onChangeHook决定,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) => {})实现代码分割

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

  cb(err,component)

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

  

七、每一个Route组件的属性

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

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',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,[
//             selectRouter,//             foundRouter,//             followRouter,//             myRouter
//         ])
//     }
// }
render(
    <Router history={browserHistory} routes={rootRouter} />,document.getElementById('root')
)

  代码分割的注意事项:

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

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

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

原文链接:https://www.f2er.com/react/304919.html

猜你在找的React相关文章