脚本宝典收集整理的这篇文章主要介绍了

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>
    }
}

这样就好了,实际效果如图
React+TypeScript入门—–BrowserRouter-脚本宝典
更新:HashRouter
HashRouter其实跟BrowserRouter使用方法差不多,大同小异

总结

以上是脚本宝典为你收集整理的

React+TypeScript入门—–BrowserRouter

全部内容,希望文章能够帮你解决

React+TypeScript入门—–BrowserRouter

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过