如何設置項目以使用提供者，路由器和路由與React，Redux和TypeScript進行路由？

Question

我正在使用TypeScript，React和Redux進行項目工作。目前，我遇到了一個問題，我想將未經過身份驗證的用戶直接路由到登錄頁面，否則將其路由到內容頁面。

我的主要問題是我收到一個TypeScript編譯錯誤，因爲我找不到路由組件的正確類型定義。我在網上查了幾個教程，但我無法設法移植他們的代碼，並使其與我的示例一起工作。

這裏是我的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

我想我的實現這是我提出問題的同一個問題。 Here it is。我相信它已經修復，因此請嘗試更新您的「@ types/react-router」軟件包。