ts+react路由react-router-dom

记录自己项目中写的内容

路由入口是一个组件， 路由出口用Switch包着，大概如下

        <TopNavigationBarWithRoute
          routePath={this.state.routePath}
        />
        <Switch>{this.renderAllRoutes()}</Switch>

//我们看一下  this.state.routePath
    const routePath: IRoutePath = {
      a: "/a",
      b: "/b",
      c: "/c",
      d: "/d",
      e: "/d/e",
      f: "/d/f",
    };


/** path of router */
export interface IRoutePath {
  a: string;
  b: string;
  c: string;
  d: string;
  e: string;
  f: string;
}

 

然后我们看看TopNavigationBarWithRoute

//重要的是引入  withRouter，  RouteComponentProps，  使组件能接收父组件传来的路由参数
import {Link, withRouter, RouteComponentProps} from "react-router-dom";

// 在你组件的Prop中 加入  extends RouteComponentProps
//this.props就有history,  location 和 match,  this.props.location.pathname就是当前的路由值
export interface ITopNavigationBarProps extends RouteComponentProps {
  /** all router  */
  routePath: IRoutePath;
}


export class TopNavigationBar extends React.Component<ITopNavigationBarProps> {
  constructor(props: ITopNavigationBarProps) {
    super(props);
  }
  public render() {
    return (
        <>
          <Link  to={routePath.a}>
            a
          </Link>
          
          <Link to={routePath.b}>
            b
          </Link>

          <Link to={routePath.c}>
            c
          </Link>
          <Link to={routePath.d}>
            d
          </Link>
        </>
    )}
}

//要加上withRouter, 这样才能完整接收父组件传来的路由参数
export const TopNavigationBarWithRoute = withRouter<any, React.ComponentClass<ITopNavigationBarProps>>(
  TopNavigationBar
);

renderAllRoutes长这样

 private renderAllRoutes(): JSX.Element[] {
    const routes = [];
    const a= (<Route key="render-a" path={this.state.routePath.a}>组件a</Route>);
    routes.push(a);
    const b= (<Route key="render-b" path={this.state.routePath.b}>组件b</Route>);
    routes.push(b);
    const c= (<Route key="render-c" path={this.state.routePath.c}>组件c</Route>);
    routes.push(c);
    //d组件里面放二级路由
    const d= (
      <Route key="render-d" path={this.state.routePath.d}>
        <TestDWithRoute
          routePath={this.state.routePath}
        />
      </Route>
    );
    routes.push(d);
    return routes;
  }

最后我的TestDWithRoute组件长这样

import {Link, Route, Switch, Redirect, withRouter, RouteComponentProps} from "react-router-dom";

//在组件的Prop接口中加 extends  RouteComponentProps 
export interface ITestDProps extends RouteComponentProps {
  // all router
  routePath: IRoutePath;
}

export class TestD extends React.Component<ITestDProps> {
 public render() {
    const {routePath} = {...this.props};
    return (
        <>
          <Link to={routePath.e}>e</Link>
          <Link to={routePath.f}>f</Link>
          <Switch>
              <Route exact={true} path={routePath.e}>组件e</Route>
              <Route exact={true} path={routePath.f}>组件f</Route>
                //点击link d, 跳转到e，  这里的this.props.location.pathname就是当前路由
              {this.props.location.pathname === routePath.d? (
                <Route>
                  <Redirect to={routePath.e} />
                </Route>
              ) : null}
            </Switch>
        </>
    );
  }
}

//最后不要忘记加withRouter
export const TestDWithRoute= withRouter<any, React.ComponentClass<ITestDProps>>(TestD);

我是把自己项目中的内容简化，如果有问题欢迎指教