реакция-маршрутизатор и машинопись выдают ошибку «не удается решить« реагировать-маршрутизатор-дом »»

Question

Поскольку я новичок в реакции и наборе текста, это, вероятно, простая ошибка, но я проверил другие ответы, которые нашел по этому поводу, и ничего не помогло.Я был бы признателен за любую помощь и объяснение того, что я делаю неправильно, чтобы я мог учиться.Я не могу заставить реакционный маршрутизатор работать с машинописью вообще.Он продолжает выдавать ошибку, что он "не может разрешить реакцию-маршрутизатор-дом" в следующем коде.Я попытался следовать базовому учебнику по реагирующему маршрутизатору и машинописи, которые я нашел здесь: https://riptutorial.com/react-router/example/30226/basic-routing

Итак, в основном я хочу, чтобы на экране входа в систему появлялись поля Имя пользователя и Пароль, а затемкнопка отправки под ним.Затем у меня есть ссылка, по которой они могут щелкнуть, чтобы зарегистрироваться, если у них еще нет учетной записи, и перенести их на другую страницу.

Я помещу класс Register в свой собственный файл и импортируюкак только это сработает, я просто не хочу показывать два разных файла для примера:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import { Alert } from 'react-bootstrap';

interface IState {
    [key: string]: any; // or the type of your input
} 

const styles = {
    background: 'lightblue'
};

export class Login extends React.Component<{}, IState> {


    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            authorized: false
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

    }


    handleChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState({
            [name]:value
        });
    }
    handleSubmit(event) {
      //TODO: we are going to submit the form to the database
        event.prevent.default();
    }

    render() {

        return (

            <div>
                <form noValidate autoComplete="off" onSubmit={this.handleSubmit} style={{ textAlign: 'center' }}>
                    <TextField
                        id="username"
                        name="username"
                        label="UserName"
                        helperText="Enter your Username"
                        value={this.state.username}
                        onChange={this.handleChange}
                        required={true}
                        style={styles}
                    />

                    <br />
                    <TextField
                        id="password"
                        name="password"
                        type="password"
                        helperText="Enter your password"
                        label="Password"
                        onChange={this.handleChange}
                        required={true}
                        style={styles}
                    />
                    <br />
                    <br />
                    <br/>
                    <Button
                        type="submit"
                        value="Submit"
                        variant="contained"
                        color="primary"

                    >Submit</Button>   
                    <br />
                    <br/>
                    <Alert variant="info">
                        <Alert.Heading>Don't Have An Account Setup?</Alert.Heading>
                        <div>
                            <Link to="/register">Register Here</Link>
                        </div>
                    </Alert>
                </form>


            </div>

        )

    }
}

class Register extends React.Component<{}, {}> {

    render() {
        return (
            <div>
                <h1>Register</h1>
            </div>
        )
    }

}

ReactDOM.render(
    <Router>
        <div>
            <Route path="/register" component={Register} />
        </div>
    </Router>
, document.getElementById('root'));

Answer 1

Вы можете использовать перенаправление response-router-dom для использования перенаправления, как показано ниже

import {  Redirect} from 'react-router-dom'
render() {
       if(condition===true){
              return (                 
                <Redirect to='/your-route-path' />
              ) 

        }
}