React+TypeScript入门-----BrowserRouter

相关文章
TypeScript+React入门
TypeScript+React入门-----引入css
React+TypeScript入门-----BrowserRouter
准备工作：
安装react-router-dom

npm i react-router-dom -S

配置webpack，划重点，如果直接在浏览器地址里输入路径，这个是必须要配置的

devServer:{
        historyApiFallback:true
    }

先写两个组件备用，非常简单的两个组件

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

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

引入BrowserRouter和Route，这两个目前就够用了

import { Route, BrowserRouter } from 'react-router-dom';

创建路由并渲染

class Rts extends React.Component{
    render(){
        return  <div className="test">   
                    <BrowserRouter> 
                        <div>
                            <Route exact={true} path="/" component={R1}></Route>
                            <Route exact={true} path="/r2" component={R2}></Route>
                        </div>   
                    </BrowserRouter>
                                        
                 </div>
    }
}

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

打开浏览器默认就是1，然后在浏览器的地址输入 yourServer/r2，就可以看到页面上显示2了

使用Link:
首先需要引入Link,从react-router-dom多引入一个即可

import { Route, BrowserRouter, Link } from 'react-router-dom';

使用Link创建一个组件

class RLink extends React.Component{
    render(){
        return <ul>
            <li><Link to="/">显示1</Link></li>
            <li><Link to="/r2">显示2</Link></li>             
        </ul>
    }
}

修改Rts组件，注意标签嵌套层级

class Rts extends React.Component{
    render(){
        return  <div className="test">                      
                    <BrowserRouter>                                                 
                        <div>
                            <RLink></RLink>
                            <Route exact={true} path="/" component={R1}></Route>
                            <Route exact={true} path="/r2" component={R2}></Route>
                        </div>   
                    </BrowserRouter>
                                        
                 </div>
    }
}

这样就好了，实际效果如图

更新：HashRouter
HashRouter其实跟BrowserRouter使用方法差不多，大同小异