Ich arbeite an einem Projekt mit TypeScript, React und Redux. Zur Zeit bin ich auf das Problem gestoßen, dass ich einen nicht authentifizierten Benutzer direkt auf eine Login-Seite weiterleiten möchte, ansonsten auf die Content-Seite.Wie richte ich ein Projekt ein, das mit React, Redux und TypeScript über Provider, Router und Route routet?
Mein Hauptproblem ist, dass ich einen TypeScript-Kompilierfehler erhalte, weil ich die richtigen Typdefinitionen für die Route-Komponenten nicht herausfinden kann. Ich habe mehrere Tutorials online durchgecheckt, während ich es nicht schaffen kann, ihren Code zu portieren und es mit meinem Beispiel arbeiten zu lassen.
Hier ist meine index.tsx: IDE shows error und der Compiler den folgenden Fehler:
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
);
Die IDE Fehler bei den folgenden Zeilen zeigen Fehler beim kompilieren.
./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>'.
Siehe auch die App, Inhalt und einer der Seite (zB Profile) Definitionen:
// 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>
);
}
}
Ich habe versucht, meine Implementierung auf der folgenden GitHub-Repository dictionary-react-redux-typescript