时间戳

首页 > 解决方案 > 如何使用带有打字稿的反应路由器dom导航到新页面

reactjs - 如何使用带有打字稿的反应路由器dom导航到新页面

问题描述

我想在用户登录后导航到新页面。通常我会使用this.props.history.push("/some_other_page");但是这给了我以下错误。

'Readonly & Readonly<{ children?: ReactNode; 类型上不存在属性 'history' }>

唱歌.tsx

interface Props {
    classes: any
}
interface State {
    email: string;
    password: string;
}

class SignIn extends Component<Props, State> {
    constructor(props: Props) {

        super(props);

        this.state = {
            email: "",
            password: "",
        };
    }

    ...

    handleLogin = async (event: any) => {

        event.preventDefault();

        const credentials: ILoginCredentials = {
            email: this.state.email,
            password: this.state.password
        }

        const res = await this.context.login(credentials);

        if (res.status === 201) {
           this.props.history.push("/dashboard");
        }

    }
   ...
}

SignIn.contextType = AuthContext;
export default withStyles(styles)(SignIn)

应用程序.tsx

import React, { Component, Fragment } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { AuthProvider, AuthContext } from "./contexts/AuthContext";
import SignIn from "./components/signin/SignIn";
import SignUp from "./components/signup/SignUp";
import Dashboard from "./components/dashboard/Dashboard";

import { createBrowserHistory } from 'history';


import './App.scss';


const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#212121',
            contrastText: '#fff',
        },
        secondary: {
            main: "#ffd600",
        }
    }
})

class App extends Component {

    componentDidMount = async () => {

    }

    createRoutes = () => {
        return (
            <Fragment>
                <Route exact path="/" component={SignIn} />
                <Route exact path="/signup" component={SignUp} />
                <Route exact path="/dashboard" component={Dashboard} />
            </Fragment>
        )
    }

    render() {
        const history = createBrowserHistory();
        return (
            <div className="root">
                <AuthProvider>
                    <MuiThemeProvider theme={theme}>
                        <BrowserRouter history={history}>
                            {this.createRoutes()}
                        </BrowserRouter>
                    </MuiThemeProvider>
                </AuthProvider>
            </div>
        )
    }
}


App.contextType = AuthContext;
export default App;

标签： reactjstypescriptreact-router-dom

解决方案

我认为您正在寻找RouteComponentProps@types/react-router-dom 库中定义的类型。没有这个 TypeScript 将无法解释history道具的类型。

导入它并将传递给React.Component类型的道具更改为Props & RouteComponentProps.

import { RouteComponentProps } from "react-router-dom";

class SignIn extends Component<Props & RouteComponentProps, State> {

然后应该定义历史道具。

推荐阅读