React从入门到放弃之前奏(5):ReactRouter4

快速入门

安装:npm i -S react-router react-router-dom

GitHub:ReactTraining/react-router

React Router中有三种类型的组件:路由器组件(BrowserRouter),路由匹配组件(Route)和导航组件(Link)。

路由器

每个React Router应用程序的核心应该是一个路由器组件。

对于Web项目,react-router-dom提供BrowserRouterHashRouter路由器。

路由器会包含所有路由组件。需要注意路由器节点下只能一个根节点。

路由匹配组件

Route:

path路径(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);

exact精准(bool):为true时,则要求路径与location.pathname必须完全匹配;

strict严格(bool):为true时,有结尾斜线的路径只能匹配有斜线的location.pathname;

strict示例:

路径 location.pathname strict 是否匹配
/one/ /one true
/one/ /one/ true
/one/ /one/two true

路由示例:

import {
HashRouter as Router,
Route,
Link,
NavLink,
Switch
} from 'react-router-dom'; import App from './App.js'; function NavBar(){
return (
<Router>
<div>
<Route component={Nav} />
<Switch>
<Route exact path='/' component={() => (<div>hello</div>)} />
<Route path='/app' component={App} />
</Switch>
</div>
</Router>
);
}

导航组件

Link:在应用中,提供导航功能

NavLink:Link的一个特殊版本,当匹配指定URL的时候,会给元素添加style

示例:

<Link to="/profile"/>
<NavLink to="/profile" activeStyle={{color:'red'}}/>

Code Split

使用Router的Code Split(按需加载)依赖webpack(默认支持)、babel-plugin-syntax-dynamic-import和react-loadable。

babel-plugin-syntax-dynamic-import: 意味着Babel处理时不会做任何额外的转换。该插件只是允许Babel解析动态导入

npm i babel-plugin-syntax-dynamic-import react-loadable -S

.bashrc:

{
"presets": [
"react"
],
"plugins": [
"syntax-dynamic-import"
]
}

代码示例:

import Loadable from 'react-loadable';

function Loading(){
return (
<div> Loading... </div>
)
} const Clock = Loadable({
loader: () => import('./Clock'),
loading: Loading,
}); export default class LoadableClock extends React.Component {
render() {
return <Clock />;
}
}
上一篇:NodeJS常用库说明


下一篇:SQL Server 的锁定和阻塞