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);

我是把自己項目中的內容簡化，如果有問題歡迎指教