React Routing Configuration

Contains link jump and JS trigger jump and pass the reference.

This is the directory structure of the project, the main code is in the SRC directory, src below a new containers folder put some of our components, router folder is configured for routing.

Write in order: code under the Detail folder

Import react from ' react '

class Detail extends React.component {
    render ()} {return
        (
            <p>detail, URL parameter:{this.props.params.id}</p>
        )
    }

Export default Detail

Home

Import react from ' react '
import {Link} ' React-router '

class Home extends React.component {
    render () { Return
        (
            <div>
                <p>Home</p>
                <link to= "/list" >to list</link>
            </div>
        )
}

} Export default Home

List

Import react from ' react '
import {hashhistory} from ' React-router '

class List extends React.component {
    rend ER () {
        const ARR = [1, 2, 3] return
        (
            <ul>
                {arr.map (item, index) => {return
                    <li key={ind EX} onclick={this.clickhandler.bind (this, item)}>js jump to {item}</li>
                })}
            </ul>
        )
    }
    ClickHandler (value) {
        hashhistory.push ('/detail/' + value)
    }
}

export Default List

404yemian:

Import react from ' react '

class NotFound extends React.component {
    render () {return
        (
            <p>404 Notfound</p>
        )
    }

Export default NotFound

Under containers There is a APP.JSX total entry file:

Import react from ' react '

class App extends React.component {
    render () {return
        (
            <div>{ This.props.children}</div>
        )
    }

Export default App

Under the Router folder:

Import react from ' react '
import {Router, Route, indexroute} from ' React-router '

import App from '. /containers/app '
import home from '. /containers/home '
import List from '. /containers/list '
import Detail from '. /containers/detail '
import notfound from '. /containers/notfound '

class Routemap extends React.component {
    updatehandle () {
        Console.log (' Each Router change triggers ')
    }
    render () {return
        (
             <router history={this.props.history} onupdate={ This.updateHandle.bind (This)}>
                <route path= '/' component={app}>
                    <indexroute }/>
                    <route path= ' list ' component={list}/>
                    <route path= ' Detail/:id ' component={detail}/>
                    <route path= "*" component={notfound}/>
                </Route>
            </Router>
        )
    }

Export Default Routemap

The final outermost index.js:

Import react from ' react '
import {render} from ' React-dom '
import {hashhistory} from ' React-router '

import Routemap
    from
    './src/router/routemap ' render (<routemap history={hashhistory}/> document.getElementById (' App ')
)

Use of the router version is ^2.8.1, if the download is more than 4.0 version, then the writing is almost completely different from the present, he made a great change, configure the time to pay attention to the router version number.

Project Address Https://github.com/wineSu/myReact/tree/master/src/containers