React路由的基本组件

React路由基础组件:

1.路由组件(router components)

<BrowserRouter> （推荐）和<HashRouter>两种路由组件

Eg:

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
     <BrowserRouter>
             <App />
    </BrowserRouter>,
	document.getElementById('root')
)

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

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

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

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组件

<Switch>
       ....
  <Route component={NoMatch}/>
</Switch>

3.导航组件(nacigation components)

Link和NavLink主要导航组件。

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

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

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

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

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。