Как перейти на новую страницу, используя реагировать роутер DOM - PullRequest
Новая
       14

Как перейти на новую страницу, используя реагировать роутер DOM

0 голосов
/ 01 ноября 2019

Я хочу перейти на новую страницу после того, как пользователь вошел в систему. Обычно я использую this.props.history.push("/some_other_page"); Однако, это дает мне следующую ошибку.

Свойство 'history' не существует навведите 'Readonly & Readonly <{children ?: ReactNode;}>

Singin.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)

App.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;

Ответы [ 2 ]

1 голос
/ 01 ноября 2019

Я думаю, вы ищете тип RouteComponentProps, определенный в библиотеке @ types / реагировать-router-dom. Без этого TypeScript не сможет интерпретировать тип history prop.

Импортировать его и изменить передаваемые реквизиты для типа React.Component на Props & RouteComponentProps. 

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

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

Затем следует определить реквизит истории.

0 голосов
/ 01 ноября 2019

Компонент должен получить реквизит истории от реагирующего маршрутизатора. Таким образом, он должен быть прямым потомком компонента Route. Если вам нужен полный объект истории, вы также можете получить этот контекст вне контекста, например router not BrowserRouter, например: 

import { createBrowserHistory } from 'history';

import { Router } from 'react-router-dom'
const history = createBrowserHistory();



<MuiThemeProvider theme={theme}>
  <Router history={history}>
   {this.createRoutes()}
  </Router>
</MuiThemeProvider>
...