Detailed description of front-end routing implementation and react-router usage posture, detailed description of react-router

Detailed description of front-end routing implementation and react-router usage posture, detailed description of react-router

Routing

For those who have experience in SPA development, the term routing is no stranger. The frontend routing is different from the backend routing technology, but the principle is the same. Before the advent of the HTML5 history API, front-end routes were all implemented through hash, which is compatible with browsers of earlier versions. # Must be included in its URI rules #. The Web service does not parse the hash, that is, the # content Web Service will automatically ignore it, but JavaScript can use window. location. after the hash is read to the path and parsed, it can respond to the logic processing of different paths.

Introduction to AngularJs UI-Router routing

If you have experienced AngularJS development, # It is no stranger. angularjs has its own officially implemented Routing System and representative third-party nested Routing Mechanism UI-Router; the following code block is shown:

. State ("main. list ", angularAMD. route ({url: '/list/: params', // url & Parameter views: {"header @ main": angularAMD. route ({templateUrl: 'simple/view/main/html/main/Header.html ', controller: 'headcontroller', controllerUrl :[****. js]}), "menu @ main": angularAMD. route ({templateUrl: 'simple/view/main/html/main/MenuModule.html ', controller: "MenuController", controllerUrl :[****. js]}), "mainContent @ main": angularAMD. route ({templateUrl: 'simple/view/main/html/main/MainContent.html '})}}))

The first parameter of the state () function is the route. list is a nested routing mechanism. When the page jumps to main. in the list route, the module and its resources (such as html and js) under the state ("main", *) are loaded first, and then the state ("main. list) modules and resources (such as html and js) to implement route nesting;

React-router

-First, the previous Code

<Router history={ hashHistory }>  <Route path='/' component={CoreLayout}>  <IndexRoute component={HomeView}/>  <Route path=”/HODE_ROUTE/:param“ component={HomeView}/>  <Route path=“ /AUDIT_ROUTE/:param" component={AuditView}/>  <Route path=“/CHART_ROUTE” component={ChartView}/>  </Route></Router>

React-router uses the jsx syntax to implement router nesting in a way similar to the DOM structure. It seems very different from the UI-Router of AngularJs, but it actually has the same idea;

Angular implementation logic:

Jump to = state = module = static resources (js, css, html) = show (page display)

Implementation logic of react-router:

Jump = "path =" component = "static resources (js, css, html) =" show (page display)
This article focuses on react-router. The following describes how to use react-router:

React-getting started with common router Components

Nested Routing

<Router history={hashHistory}> <Route path="/" component={App}>  <Route path="/repos" component={Repos}/>  <Route path="/about" component={About}/> </Route></Router>

In the code above, when a user accesses/repos, the App component is loaded first, and then the Repos component is loaded inside it.

<App> <Repos/></App>

The vro component routes attributes can be imported separately without being written in the Router component.

let routes = <Route path="/" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/></Route>;<Router routes={routes} history={browserHistory}/>

Path attribute

The path attribute of the Route component specifies the matching rules for the Route. See the following example.

<Route path="inbox" component={Inbox}>  <Route path="messages/:id" component={Message} /></Route>

In the code above, the following components are loaded when the user accesses/inbox/messages/: id.

<Inbox> <Message/></Inbox>

IndexRoute component

Index.html: loads components by default. The following code loads the home component by default.

<Router> <Route path="/" component={App}>  <IndexRoute component={Home}/>  <Route path="accounts" component={Accounts}/>  <Route path="statements" component={Statements}/> </Route></Router>

The component structure is as follows when the user accesses.

<App> <Home/></App>

Redirect component

The Redirect component is used to Redirect a route. When you access a route, it automatically jumps to another route.

<Route path = "inbox" component = {Inbox}> {/* jump from/inbox/messages/: id to/messages /: id */} <Redirect from = "messages/: id" to = "/messages/: id"/> </Route>

Now access/inbox/messages/5 will automatically jump to/messages/5.

Link

The Link component is used to replace tag a and generate a Link, allowing users to click to jump to another route. It is basically the React version of the tag and can receive the status of the Router.

Form Processing

The Link component is used for normal users to click to jump, but sometimes forms jump and button jump operations are also required. How can we connect to the React Router in these cases?

The first method is to use browserHistory. push

 handleSubmit(event) {  event.preventDefault()  const userName = event.target.elements[0].value  const repo = event.target.elements[1].value  const path = `/repos/${userName}/${repo}`  browserHistory.push(path) }

$ {UserName} is a common expression method in backend languages. You can use variables in strings.

 handleSubmit(event) {  // ...  this.context.router.push(path) },

The second method is to use the context object.

export default React.createClass({ // ask for `router` from context contextTypes: {  router: React.PropTypes.object }, handleSubmit(event) {  // ...  this.context.router.push(path) },})

Multi-person collaborative development router File Management

Generally, a project will have a unified router file, which is equivalent to a router pool. Different requests request the matched paths in the router pool and load the pages required for the request. But... Each developer needs to configure a route when developing a component, which makes the router file difficult to manage and easily leads to conflicts or even faults. So .., maybe, it is possible that a XXX. the router file. When the front-end code is packaged and uploaded to the production environment, a hook function is triggered. the router file is merged into the central router file to prevent multiple users from operating the router file.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.