React+TypeScript入门-----BrowserRouter

准备工作：安装react-router-domnpm 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> }}这样就好了，实际效果如图