如何使用 Provider、Router 和 Route 设置项目以使用 React、Redux 和 TypeScript 进行路由？

Question

我正在使用 TypeScript、React 和 Redux 开发一个项目。目前我遇到了一个问题，我想将未通过身份验证的用户直接路由到登录页面，否则路由到内容页面。

我的主要问题是我收到一个 TypeScript 编译错误，因为我无法找出 Route 组件的正确类型定义。我在线查看了几个教程，但我无法设法移植他们的代码并使其与我的示例一起使用。

这是我的 index.tsx:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Router, Route } from 'react-router';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import { Reducers, InitialState } from './reducers';

import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';

import App from './app/App';
import Content from './components/pages/Content';
import Login from './components/pages/Login';
import Overview from './components/containers/Overview';
import Payment from './components/containers/Payment';
import Profile from './components/containers/Profile';

const history = createHistory();    
const middleware = routerMiddleware(history);

const store = createStore(
  combineReducers({
    ...Reducers,
    router: routerReducer
  }),
  InitialState,
  applyMiddleware(thunk.withExtraArgument(middleware)),
);

function isAuth() {
  let user = FirebaseApp.auth().currentUser;
  return user !== null;
}

const app = document.getElementById('root') as HTMLElement;
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route component={App}>
        <Route path="/" component={Content}>
          <Route path="/" exact={true} component={Overview} />
          <Route path="/payment" component={Payment} />
          <Route path="/profile" component={Profile} />
        </Route>
        <Route onEnter={isAuth}>
          <Route component={Login} />
        </Route>
      </Route>
    </Router>
  </Provider>,
  app
);

IDE 在以下行显示错误：IDE shows error 并且编译器抛出以下错误：编译失败。

./src/index.tsx
(60,14): error TS2322: Type '{ component: ComponentClass<{}>; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ children?: ReactNode; }> & Rea...'.
  Type '{ component: ComponentClass<{}>; children: Element[]; }' is not assignable to type 'Readonly<RouteProps>'.
    Types of property 'component' are incompatible.
      Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<RouteComponentProps<any> | undefined> | ComponentClass<RouteComponentProps<any...'.
        Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<RouteComponentProps<any> | undefined>'.

另请参阅应用程序、内容和其中一个页面（例如个人资料）定义：

// App:
import * as React from 'react';
import './App.css';
import { connect } from 'react-redux';
import { GlobalState } from '../reducers';
export class App extends React.Component<any, any> {
  render() {
    return (
      <div id="viewport" className="App" />
    );
  }
}
function select(state: GlobalState) {
  return state.sessionState;
}
export default connect(select)(App);

// Content:
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import Header from '../header/Header';
import Footer from '../footer/Footer';
export default class Content extends 
React.Component<RouteComponentProps<{}>, void> {
    render() {
        return (
            <div>
                <Header />
                <div className="Layout" id="container" />
                <Footer />
            </div>
        );
    }
}

// Login:
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
export default class Login extends React.Component<RouteComponentProps<{}>, void> {
    render() {
        return (
            <div>
                <input type="email" value="" />
                <input type="password" value="" />
                <input type="submit" value="Login" />
            </div>
        );
    }
}

// Profile:
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
export default class Profile extends React.Component<RouteComponentProps<{}>, void> {
    render() {
        return (
            <div>
                Profile
            </div>
        );
    }
}

我试图将我的实现基于以下 GitHub 存储库 dictionary-react-redux-typescript

Answer 1

我认为这与我提出的问题是同一个问题。。我相信它已得到修复，因此请尝试更新您的“@types/react-router”包。

如何使用 Provider、Router 和 Route 设置项目以使用 React、Redux 和 TypeScript 进行路由？

How to setup a project to route with React, Redux and TypeScript using Provider, Router and Route?

typescript

react-router

react-redux

react-router-redux