发布于 

React路由的基本组件

React路由基础组件:

1.路由组件(router components)

<BrowserRouter> (推荐)和<HashRouter>两种路由组件

Eg:

1
2
3
4
5
6
7
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)

2.路由匹配组件(router matching components)

<Route><Switch>路由匹配组件。

Route:通过<Route>组件的path属性匹配当前地址,当匹配成功时就渲染component属性指定的组件。

1
2
3
4
5
6
import { Route, Switch } from "react-router-dom";
....
// 当前路径是'/about'
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>

Switch:遍历所有子Route元素,并仅渲染与当前地址匹配的第一个元素。实现404组件

1
2
3
4
<Switch>
....
<Route component={NoMatch}/>
</Switch>

3.导航组件(nacigation components)

LinkNavLink主要导航组件。

Link: 创建连接,渲染后为html的a标签

1
<Link to='/'>Home</Link>    =>  <a to='/'>Home</a>

NavLink:特殊类型的Link,当to属性与当前地址匹配时,自动添加active状态。

1
<NavLink to="/react" activeClassName="active">React</NavLink>

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.