[英]react-router and typescript throwing "Can't resolve 'react-router-dom'" error
由于我是反应和打字稿的新手,这可能是一个简单的错误,但我已经检查了我发现的其他答案,但没有任何效果。 我将不胜感激任何帮助和解释我做错了什么,以便我可以学习。 我似乎根本无法让 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'));
您只需要安装提供类型定义的@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
您可以使用 react-router-dom 的重定向来使用如下所示的重定向
import { Redirect} from 'react-router-dom'
render() {
if(condition===true){
return (
<Redirect to='/your-route-path' />
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.