react学习笔记 路由(1)

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~