react 路由(1)
install相应的模块
zengwe:try-router$ npm install --save react-router-dom
zengwe:try-router$ npm install --save-dev @types/react-router-dom
react-router-dom这个包比react-router要多一下东西,具体可百度,这个为typescript的.d.ts文件
基本思路
路由不是统一管理,而已到相应的模块在控制相应的路由,这样更加灵活/模块化也更清晰.
基本使用
about.tsx
import React, { Component } from 'react';
export class AboutPage extends Component {
render() {
return (
<div>
about page!
</div>
);
}
}
App.tsx
import React, { Component } from 'react';
import './App.css';
import { Route, BrowserRouter, Switch, NavLink} from 'react-router-dom';
import { AboutPage } from './page/about';
import { NotFoundPage } from './page/not-found';
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<div>
<NavLink className='navCls' activeClassName="navClsAct" to={'/w/121'}>about page</NavLink>
<NavLink className='navCls' activeClassName="navClsAct" to={'/dfadfads'}>not found</NavLink>
</div>
<div>
<div>
<Switch>
<Route path={'/w/:id'} component={AboutPage}></Route>
<Route component={NotFoundPage}></Route>
</Switch>
</div>
</div>
</div>
</BrowserRouter>
);
}
}
export default App;
说明
<NavLink className='navCls' activeClassName="navClsAct" to={'/w/121'}>about page</NavLink>
NavLink为Link的特殊类型,与Link的最大区别应该是添加了activeClassName这个属性,当路由匹配是会给当前的a标签添加样式类navClsAct, className和普通react组件一样的功能.
to:为导航路径
为路由的容器(我是这么理解的,当前处于学习阶段),所有路由的组件都是要在这个组件的内部,子路由可以不用在写这个了,可能是有context的原因没看过源码,以后看了详细的文档再来区分这几个路由容器.
当path为undefined是就相当于404页面.
嵌套路由
网上大量的react的文章和blog都是把路由写到了一个文件,这个就不是很灵活了,分配模块任务有不是很方便.
没找到以前react嵌套路由的例子
App.tsx
import React, { Component } from 'react';
import './App.css';
import {Route, BrowserRouter, Switch, NavLink} from 'react-router-dom';
import { HomePage } from './page/home';
import { AboutPage } from './page/about';
import { NotFoundPage } from './page/not-found';
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<div>
<NavLink className='navCls' activeClassName="navClsAct" to={'/q'}>Home page</NavLink>
<NavLink className='navCls' activeClassName="navClsAct" to={'/w/121'}>about page</NavLink>
<NavLink className='navCls' activeClassName="navClsAct" to={'/dfadfads'}>not found</NavLink>
</div>
<div>
<div>
<Switch>
<Route path={'/q'} component={HomePage}></Route>
<Route path={'/w/:id'} component={AboutPage}></Route>
<Route component={NotFoundPage}></Route>
</Switch>
</div>
</div>
</div>
</BrowserRouter>
);
}
}
export default App;
home.tsx
import React, { Component } from 'react';
import { Route, RouteComponentProps} from 'react-router-dom';
import { HomeBodyPage } from './home-body';
export class HomePage extends Component<RouteComponentProps> {
render() {
let match = this.props.match;
return (
<div>
home page!
<Route path={`${match.url}`} component={HomeBodyPage}></Route>
</div>
);
}
}
home-body.tsx
import React, { Component } from 'react';
export class HomeBodyPage extends Component {
render() {
console.log('fadfads');
return (
<div>
home body!
</div>
);
}
}
子路由可以的path必须写完整的路径所以用Props.match中的url,如果在match中含有参数,可以在Component<RouteComponentProps>
END~