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使用方法差很少，大同小異