[英]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.