react-router-dom+typescript配置

今天在ts中配置react-router-dom时，遇到了各种坑，记录一下。

先说下react-router-dom中的两种模式配置：BrowserRouter vs HashRouter

//BrowserRouter  (./router/index.tsx)
import * as React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import index from '../pages/Index/index';
export default class RouteConfig extends React.Component {
  render(){
    return (
      <BrowserRouter basename="/pointsmall">
        <Switch>
          <Route path="/" exact component={index}></Route>
        </Switch>
      </BrowserRouter>
    )
  }
}

//HashRouter  (./router/index.tsx)
import React, { Component } from 'react';
import { HashRouter, Switch, Route } from 'react-router-dom';
import index from '../views/Index/index';
import test from '../views/Test/index';
import result from '../views/Result/index';
export default class RouteConfig extends Component {
  render(){
    return (
      <HashRouter>
        <Switch>
          <Route path="/" exact component={index}></Route>
          <Route path="/test/:id" component={test}></Route>
          <Route path="/result" component={result}></Route>
        </Switch>
      </HashRouter>
    )
  }
}

1. 遇到的第一个坑：Could not find a declaration file for module 'react-router-dom'.

虽然我们安装了react-router-dom，

npm install --save react-router-dom
或者
yarn add react-router-dom

但要想typscript认识react-router-dom，我们还要安装对应的声明文件

npm i -D @types/react-router-dom
or
yarn add @types/react-router-dom -D

2. 在根目录的index.tsx中要修改对应的router信息

原来的代码为：

ReactDOM.render(<App />, document.getElementById('root'));

改为

//index.tsx
import Route from './router/index';
const render = (Component: any) => {
  ReactDOM.render(
      <Component />, 
      document.getElementById('root') as HTMLElement
  )
}
render(Route)

如果是js的话，改为如下：

//index.js
const render = Component =>{
  ReactDOM.render(

      <Component />,
      document.getElementById('root')

  )
}
render(Route)