Shulou(Shulou.com)06/01 Report--

Foreword:

This article is a summary of individual learning react-router. Including routing basic configuration, jump, rights management, the relationship between components and routing configuration, code segmentation. Welcome to exchange guidance.

I. the basis of routing

1. Routing configuration-displays the view of the routing component (ui-view for analogy angular)

Routing configuration: rules for route matching

Render ((), document.getElementById ('root'))

View: where to put the routing component (URL matches, and where should the corresponding component be placed)

Each Route is only a component, and the child route is the component of the this.props.children. The Route decides which child route to display by matching the URL.

Class App extends PureComponent {render () {return ({this.props.children} {/ * this.props.children is a component nested in App, equivalent to View*/} with child routes)}}

2. Default route (IndexRoute)

The matching path of the component is'/', there are four child routes, and the current route is only'/', so what page should be displayed?

Here is the IndexRoute component-if you want to use one of the four directly, use IndexRedirect

Render ((), document.getElementById ('root'))

If you do not use the IndexRoute component, there is also an opportunistic way to use {this.props.children | |} directly in the App component to change this.props.children to undefined at the ui display level.

Disadvantages: in this form, HOOK such as onEnter,onLeave cannot be used without participating in the routing mechanism.

III. Route Jump

1. IndexLink & Link (active status dispute)

If you have the following two links, and the URL is'/ my/mioawwwww', both routes match, then both are active states (add the style of activeStyle,activeClassName accordingly)

Mypagemyname

If you only want to add active styles to the myname button, you can use IndexLink for Mypage

Mypagemyname

IndexLink is complementary to Link. Active status will be activated only when the URL matches'/ my' completely.

two。 Jump parameter to

2.1Jump directly to check my info via to='xx/xx'

2.2 hash = object with parameters jump (pathname, query, hash, state). Note: these parameters are all stored in this.props.location.

Select

2.3 location = function, which is registered in the route jump event, and is executed each time the route changes, and is used as an argument via the latest route

({... location, query: {name: 'ryan'}})} > Hello

2.4: do not use Link, but directly operate router within the function

Older version: because only context is used by router to transmit routing information, each component can easily obtain routes through this.context.router

New version: router is placed in this.props, and routes can be obtained through this.props.router

Note: the difference between push and replace, one is to add, the other is to replace, the replacement in the history no longer exists, so the browser can not fall back to the pre-replacement page.

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. If it is not a Route component, but a subcomponent of Route, then this.props.router = = undefined

If you do not use Link, there are two ways

3.1 contextTypes

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

3.2 introduction of browserHistory,hashHistory

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

IV. Redirection

Redirect to other routes of the same level

Render ((), document.getElementById ('root'))

Redirect from the directory of the parent route

5. Permissions of routing mechanism

1.onEnter

Const onEnterHook = (nextState, replace / *, cb*//*) if the cb parameter is added, the hook will be executed asynchronously, and blocking will occur before cb returns * /) = > {console.log ('onenter', nextState); / / replace / / is router.replace (). If the visitor does not have permission, the hook will be directed to another page}

Properties of nextState

2.onLeave: similar to onEnter, the nextState attribute is different

3.onChange (prevState, nextState, replace, callback?) for child rout

One of the subroutes entering the route is triggered, or the query,hash is changed

Once the onChange attribute is added, child routes are determined through onChangeHook, and Link does not work.

6. the one-to-one correspondence between components and routing, loading components on demand

/ / this.props.children; / / const {main, sidebar} = this.props

Asynchronously load components, using (need to add require.ensure ([], (require) = > {}) to achieve code segmentation

GetComponent (nextState, callback) & & getComponents (nextState, callback)

Cb (err, component)

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

7. The properties of each Route component

8. Another way of routing configuration

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 (, document.getElementById ('root'))

Considerations for code segmentation:

1. The split components in require.ensure need to be exposed using module.export

Module.exports = xxx; / / available xxx components export default xxx / / not available xxx components

2. GetComponent,getComponents,getIndexRoute,getChildRoutes only implements asynchronous loading. To achieve code segmentation, you still need to use require.ensure.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.