React router applications of Route

Route is React Router components used in routing information, whenever there is a need to component when deciding whether to render URL, you need to create a Route.

react-router Many features are maintained consistent with React, such as its declarative components, nested components, of course, also includes a state machine characteristics of React.

1.path

Each Route requires a path attribute, path attribute is a url, when the URL matches a time Route, this defined Route component will be rendered.

Rendering group between 2.Route way

（1）Component

component is a component value, when the URL and when Route match, the Component attribute definition component will be rendered.

<Route path="/mycom" component={MyCom} >

（2）Render

Render value is a function that returns a React element. In this way conveniently delivered in the additional property of the component to be rendered.

<= The Route path '/ MYCOM' the render = {(The props) => { 

 <MyCom The props {...} = {data} extraProps /> // MyCom assembly receives an additional data attributes
 
}} > 

</ the Route>

（3）children

Children also the value of a function, the function returns to render React elements. The previous difference is, whether the match is successful, Children returned component will be rendered. When there is no match, match property is null.

<Route path="/myCom" render={(props) => {

 <div className={props.match ? 'active' : ''}>

   <Foo {…props} data={extraProps} />

 </div>

}}

</Route>

If Route match the current the URL of , to be rendered root div element of class will be set to active.

3. multi-level routing

Continued to write in the routing inside, mount components, you can achieve multi-level routing. Nested routing implementation.

<Route path=‘/myCom’ component={myCom}>
　　<Route path=‘/myCom/sonCom’ component={SonCom}></Route>
</Route>

If the multi-level routing hierarchy of nested too deep, then we write a sub routing path would be particularly troublesome, so it can be:

<Route path=‘/mycom’  render={(props) => {
　　<Route path={`${props.match.path}/sonCom`} component={SonCom} />
}}>
</Route>

Match from deconstruction props out, match.path is our current path of this route, so no matter how deeply nested, can be written on a route

4. The dynamic parameter passing

/ foodlist /: id, pass past values in the routing props mount components in, props , there are a match, match There is a params, attention: props only routing components mounted only

MyCom props component in it can get to id

Can be used in a this.props.history.push component ( "/ path", {name : "hellow"}), to pass parameters, values props.location.state pass past the

5.withRouter

A typical high-end components, both if we want to achieve click to jump, do not want to use Link of a label, we can use withRouter give us a spit Hit the jump routing component implementation. Eg.

import { withRouter } from 'react-router-dom’;

//使用自定义的组件：

<CustomNavLink to="/food">food</CustomNavLink>

<CustomNavLink to="/wiki">wiki</CustomNavLink>

<CustomNavLink to="/profile">profile</CustomNavLink>

//给自定义组件实现点击功能：

const CustomNavLink = withRouter(class EnhenceCustomNavLink extends Component {

    render () {

      return (

        <li onClick={this.goto.bind(this)}>

          {

            this.props.location.pathname === this.props.to ? '>' + this.props.children : this.props.children

          }

        </li>
    Goto () {
    }

      )



      this.props.history.push(this.props.to)

    }

})

If your component does not have routing information, you can use withRouter (component) will wrap this component, props which will have the routing information.

React router applications of Route

Guess you like