React-router路由问题

Question

class R1 extends React.Component{
    render(){
        return <div>1</div>
    }
}

class R2 extends React.Component{
    render(){
        return <div>2</div>
    }
}

class Rts extends React.Component{
    render(){
        return  <div>
            <Route path="/" component={R1}></Route>
            <Route  path="/R" component={R2}></Route>
        </div>  
    }
}



const render = () => {
    ReactDOM.render(
        <Router history={createHistory}>         
            <Rts/>
        </Router>,
        document.querySelector('#app')
    )
}
render();

http://localhost:8080/R 的结果是 Cannot GET /R
我很气啊

Answer 1

需要引入

import {hot} from 'react-hot-loader';
import { Switch, HashRouter, Route} from 'react-router-dom';   

class R1 extends React.Component{
    render(){
        return <div>1</div>
    }
}

class R2 extends React.Component{
    render(){
        return <div>2</div>
    }
}

@hot(module)
class Rts extends React.Component{
    render(){
        return  <div>   
                    <HashRouter> 
                        <Switch>
                            <Route exact={true} path="/" component={R1}></Route>
                            <Route exact={true} path="/r2" component={R2}></Route>
                        </Switch>   
                    </HashRouter>
                 </div>  
    }
}

const render = () => {
    ReactDOM.render(               
            <Rts/>
       ,
        document.querySelector('#app')
    )
}
render();

记得@hot(module)，这样就可以了

Answer 2

<Route exact path="/" component={R1}></Route>
<Route path="/R" component={R2}></Route>