原以为要像vue-router那样专门搞一个路由文件,后来才发现react的router在配置方面要比vue简单的多,就是引入两个组件就OK了
安装react-router-dom插件
安装之后引入组件:
import {BrowserRouter, Route} from 'react-router-dom'
然后直接把Route组件嵌在BrowserRouter之中就可以了,注意BrowserRouter只能有一个子元素,然后用component属性指定渲染哪个组件
<BrowserRouter> <div> <Route path="/" component={Home}></Route> <Route path="/inner" component={Inner}></Route> </div> </BrowserRouter>
然而到这里还没完,渲染的时候/inner也会渲染到Home组件,所以这里需要添加一个exact,最后的代码是这样的,这样能够让路由完全匹配,而不是部分匹配
<BrowserRouter> <div> <Route path="/" exact component={Home}></Route> <Route path="/inner" exact component={Inner}></Route> </div> </BrowserRouter>