React路由原生js來實現

import React from react

import ReactDOM from react-dom

class Home extends React.Component{

render(){

return (<div>

<h3>我是主頁組件</h3>

</div>)

}

}

class About extends React.Component{

render(){

return (<div>

<h3>我是關於組件</h3>

</div>)

}

}

class App extends React.Component{

constructor(){

super()

this.state={

hash:window.location.hash.substring(1)

}

}

componentWillMount(){

window.addEventListener(hashchange,()=>{

this.setState({

hash:window.location.hash.substring(1)

})

},false)

}

render(){

let RouterView=null

switch(this.state.hash){

case /home:

RouterView=<Home/>

break;

case /about:

RouterView=<About/>

break;

default:

RouterView=<Home/>

break

}

return (<div>

<h3>我是路由</h3>

<ul>

<li><a href=#/home>主頁</a></li>

<li><a href=#/about>關於</a></li>

</ul>

{RouterView}

</div>)

}

}

ReactDOM.render(<App/>,document.getElementById(root))

1，通過location.hash來獲取hash值，然後React組件的生命同期來設置狀態，從而來設置hash的改變來對應的組件，從而來實現路由。