react-router 和 typescript 抛出“无法解析 'react-router-dom'”错误

Posted 2023-02-22

【中文标题】react-router 和 typescript 抛出“无法解析 \'react-router-dom\'”错误

【英文标题】：react-router and typescript throwing "Can't resolve 'react-router-dom'" errorreact-router 和 typescript 抛出“无法解析 'react-router-dom'”错误

【发布时间】：2019-11-03 19:44:50

【问题描述】：

由于我是 react 和 typescript 的新手，这可能是一个简单的错误，但我已经检查了我找到的其他答案，但没有任何效果。我将不胜感激任何帮助和解释我做错了什么，以便我学习。我似乎根本无法让 react-router 使用打字稿。它在以下代码中不断抛出“无法解析 react-router-dom”的错误。我试图按照我在这里找到的 react-router 和 typescript 的基本教程进行操作： 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'));

【问题讨论】：

我认为你成功安装了 react-router-dom 吧？

@FurkanO 是的，我已经安装了反应路由器 dom 和类型...没有显示错误，但尝试编译时会抛出错误

您是否尝试过删除package-lock.json 并再次运行npm install？

【参考方案1】：

您只需安装提供类型定义的@types (@types/react-router-dom) 并安装react-router-dom：

npm install -S react-router-dom @types/react-router-dom

或

yarn add react-router-dom @types/react-router-dom

【参考方案2】：

您可以使用 react-router-dom 的 Redirect 来使用如下所示的重定向

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

        

【讨论】：

谢谢，但我不是在寻找解决方法，我想了解为什么正常的方法不起作用，以便我可以了解我做错了什么。