1
私はTypeScript、React、Reduxを使用しているプロジェクトに取り組んでいます。現在、認証されていないユーザーをログインページに直接ルーティングする必要があるか、そうでない場合はコンテンツページにルーティングするかという問題が発生しました。プロバイダ、ルータ、ルートを使用して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>'.
も参照してくださいアプリケーション、コンテンツやページの1（例えばプロファイル）の定義：
// 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