Detailed explanation of how to use react-router to implement front-end routing

This article mainly introduces the detailed explanation of front-end routing and the usage posture of react-router, and introduces the usage of react-router in detail. If you are interested, you can learn more

routing

For those who have experience in SPA development, the term routing is not unfamiliar. The implementation techniques of front-end routing and back-end routing are different, but the principles are the same. Before the emergence of HTML5's history API, front-end routing was implemented through hash, and hash was compatible with lower version browsers. It needs to have # in its URI rules. The web service does not parse the hash, which means that the content after # will be automatically ignored by the web service. However, JavaScript can be read through window.location.hash. After reading the path and parsing it, it can respond to the logic of different paths. deal with.

A brief introduction to AngularJs UI-Router routing

If you have AngularJS development experience, # is not unfamiliar, angularjs has its own official implementation Routing system, there is also a relatively representative third-party nested routing mechanism UI-Router; as shown in the following code block:

.state("main.list",angularAMD.route({
    url : '/list/:params',//url &参数
    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 It is routing. "main.list" is a nested routing mechanism. When the page jumps to the "main.list" route, the modules and their resources (html, js, etc.) under state ("main",*) will be loaded first. ), and then load the modules and resources (html, js, etc.) under the state ("main.list") to implement routing nesting;

react-router

-First a piece of code

<Router history={ hashHistory }>
  <Route path=&#39;/&#39; 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 implements router nesting in the form of jsx syntax similar to the DOM structure; with AngularJs UI-Router They seem to be very different, but in fact they have similar ideas;

Angular’s ​​implementation logic:

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

react-router implementation logic:

Jump=》path=》component=》static resources (js, css , html) =》show (page display)
This article mainly talks about react-router. The following is a brief introduction to the usage posture of react-router:

Getting started with common components of react-router

Nested routing

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

In the above code, when the user accesses /repos, he will first Load the App component, and then load the Repos component inside it.

<App>
 <Repos/>
</App>

The sub-route does not need to be written in the Router component, and the routes attribute of the Router component can be passed in separately

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 of the route. See the example below

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

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

<Inbox>
 <Message/>
</Inbox>

IndexRoute component

Similar to index.html, the component is loaded 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>

Now, when the user accesses /, the loaded component structure is as follows.

<App>
 <Home/>
</App>

Redirect component

The Redirect component is used for routing jumps, that is, when users access a route, they will automatically jump to Another route.

<Route path="inbox" component={Inbox}>
 {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
 ＜Redirect from="messages/:id" to="/messages/:id" />
</Route>

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

Link

The Link component is used to replace the a tag and generate a link, allowing users to jump to another route after clicking. It's basically a React version of the a tag that receives the status of the Router.

Form processing

The Link component is used for normal user click jumps, but sometimes operations such as form jumps and button click jumps are also required. How to connect these situations with React Router?

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} A commonly used backend language To write an expression, you can get the variable in the string

 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 one The unified router file is equivalent to a router pool. Different requests request the matching path in the router pool and load the page required for the request. but. . . Every developer developing a component will need to configure routing, which will make the router file difficult to manage and may easily lead to conflicts or even failures. So. . , maybe, for a XXX.router file in each component folder, a hook function can be triggered when the front-end code is packaged and uploaded online, and the XXX.router file can be unified into the central router file, thereby avoiding multi-person operations. router file.

The above is the detailed content of Detailed explanation of how to use react-router to implement front-end routing. For more information, please follow other related articles on the PHP Chinese website!