react-router use tutorial

1. About the role of # in url s:

   • Study: http://www.ruanyifeng.com/blo...

   • '#'represents a location in a Web page.The character to the right is the identifier for that location

   • Change #Does not trigger page overload

   • Changing #will change the browser's access history

   • window.location.hash reads #value

   • window.onhashchange = func listens for hash changes

2. reat-router

   • github home page: https://github.com/ReactTrain...

   • Official Tutorial: https://github.com/reactjs/re... Official Tutorial)

   • One Peak Tutorial: http://www.ruanyifeng.com/blo...

3. Relevant components in the react-router Library

   • Related components included:

     • Router: A router component that contains routing components to manage routes

     • Route: Routing component, registering routes

     • IndexRoute: Default Routing Component

     • hashHistory: Routing switches are determined by the hash change of the URL, that is, the #part of the URL changes

     • Link: Route link component that generates a tag's

   • Router:Router Component

     • Property: history={hashHistory} is used to monitor changes in the browser's address bar and parse the URL into an address object for React Router matching

     • Sub-component: Route

   • Route:Routing component

     • Attribute 1: path='/xxx'

     • Attribute 2: component={Xxx}

     • Root routing component: path='/'component, usually App

     • Subrouting Component: Component configured by child <Route>

   • IndexRoute: Default Route

     • This routing component is requested by default when the parent route is requested

   • hashHistory

     • The history property for the Router component

     • Role: Generated for address url? _k=hash, used to internally save the corresponding state

   • Link:Routing Link

     • Attribute 1: to='/xxx'

     • Attribute 2: activeClassName="active"

4. Download related plug-ins:

   • npm install react-router@3 --save

5. Code

   • Define individual routing components

     • About.js

       import React from 'react'
       function About() {
         return <div>About Component Content</div>
       }
       export default About

     • Home.js

       import React from 'react'
       function Home() {
         return <div>Home Component Content 2</div>
       }
       export default Home

     • Repos.js

       import React, {Component} from 'react'
       import {Link} from 'react-router';
       
       export default class Repos extends Component {
           constructor(props){
               super(props);
               this.state = {
                   repos : []
               }
           }
           componentDidMount(){
               let repos = [
                   {name : 'facebook', repo : 'yarn'},
                   {name : 'facebook', repo : 'react'},
                   {name : 'google', repo : 'angular'},
                   {name : 'antd', repo : 'antd'},
               ];
               this.setState({repos});
           }
           render() {
               return (
                   <div>
                       <h3>Repos assembly</h3>
                       <ul>
                           {
                               this.state.repos.map((item, index) => {
                                   return <li key={index}><Link to={`/repos/${item.name}/${item.repo}`}>{item.repo}</Link></li>
                               })
                           }
                       </ul>
                       {this.props.children}
                   </div>
               )
           }
       }

   • Define application components: App.js

     import React from 'react';
     import {Link} from 'react-router'
     
     class App extends React.Component{
         render(){
             return (
                 <div>
                     <h2>Hello, React Router!</h2>
                     <ul>
                         <li><Link to="/about">about</Link></li>
                         <li><Link to="/repos">repos</Link></li>
                     </ul>
                     {this.props.children}
                 </div>
             )
         }
     }
     
     export default App;

   • Define entry JS: index.js-->Rendering component

     import React from 'react';
     import ReactDOM from 'react-dom';
     import {Router, Route, hashHistory, IndexRoute} from 'react-router';
     import App from './components/App/App';
     import About from './components/About/About';
     import Repos from './components/Repos/Repos';
     import Home from './components/Home/Home';
     import Repo from './components/Repo/Repo';
     
     ReactDOM.render(
         (
             <Router history={hashHistory}>
     
                 <Route path="/" component={App}>
     
                     <IndexRoute component={Home}></IndexRoute>
                     <Router path="/about" component={About}></Router>
                     <Router path="/repos" component={Repos}>
                         <Route path="/repos/:name/:repo" component={Repo}></Route>
                     </Router>
                 </Route>
             </Router>
         ),
         document.getElementById('root')
     );

   • Home page: index.html

     <style>
       .active {
         color: red;
       }
     </style>
     <div id='root'></div>

6. Pass request parameters

   • Repo.js: Subrouting component under repos component

     import React from 'react';
      
      function Repo({params}) {
          return <p>User name:{params.name}, Warehouse name:{params.repo}</p>
      }
      
      export default Repo;

   • repos.js

     import React, {Component} from 'react'
     import {Link} from 'react-router';
     
     export default class Repos extends Component {
         constructor(props){
             super(props);
             this.state = {
                 repos : []
             }
         }
         componentDidMount(){
             let repos = [
                 {name : 'facebook', repo : 'yarn'},
                 {name : 'facebook', repo : 'react'},
                 {name : 'google', repo : 'angular'},
                 {name : 'antd', repo : 'antd'},
             ];
             this.setState({repos});
         }
         render() {
             return (
                 <div>
                     <h3>Repos assembly</h3>
                     <ul>
                         {
                             this.state.repos.map((item, index) => {
                                 return <li key={index}><Link to={`/repos/${item.name}/${item.repo}`}>{item.repo}</Link></li>
                             })
                         }
                     </ul>
                     {this.props.children}
                 </div>
             )
         }
     }