[英]Using react router with electron
我正在使用Electron上的create-react-app进行项目开发,并具有react-router-dom。 我正在授权用户登录名,并希望在此之后立即将其重定向到主页,但是用于重定向的常规语法似乎不起作用。 请看一下我的代码并提出建议。
Index.js
import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
import {
BrowserRouter as Router,
Route,
Switch,
Link,
Redirect,
withRouter
} from "react-router-dom";
let root = document.createElement('div');
root.id = "root";
document.body.appendChild( root );
render( <Router><App /></Router>, document.getElementById('root') );
App.js
import '../assets/css/App.css';
import React, {Component} from 'react';
import VideoContainer from './VideoContainer';
import Clock from './Clock';
import News from './News';
import Spotify from './Spotify';
import Login from './Login';
import {
BrowserRouter as Router,
Route,
Switch,
Link,
Redirect,
withRouter
} from "react-router-dom";
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path="/" component={Login} />
<Route path="/home" component={Clock} />
<Route path="/news" component={News} />
</Switch>
</Router>
);
}
}
export default withRouter(App);
Login.js
import '../assets/css/Login.css';
import React from 'react'
import PropTypes from 'prop-types'
const URL = 'http://localhost:3000/api/v1/sessions'
import {
BrowserRouter as Router,
Route,
Switch,
Link,
Redirect,
withRouter
} from "react-router-dom";
class Login extends React.Component {
constructor(props) {
super(props);
this.logUser = this.logUser.bind(this);
}
addTokenToBrowser(token) {
localStorage.setItem("id", token.id)
localStorage.setItem("token", token.token)
}
logUser (e) {
e.preventDefault()
const data = {
username: e.target.children[0].value,
password: e.target.children[2].value
}
fetch(URL, {
method: 'POST',
body: JSON.stringify(data),
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(json => {
if (json.status==="accepted"){
localStorage.setItem("id", json.id)
localStorage.setItem("token", json.token)
this.props.history.push('/home')
} else {
alert('Please enter a valid email and password')
}
})
}
render () {
console.log("My history", this.props);
return (
<div className="myInput">
<form onSubmit={this.logUser} >
<input placeholder="Username"></input>
<br></br>
<input placeholder="Password"></input>
<br></br>
<button type="submit">Login</button>
</form>
</div>
)
}
}
export default Login;
<Route path="/" component={Login} />
<Route path="/home" component={Clock} />
<Route path="/news" component={News} />
更改为
<Route path="/home" component={Clock} />
<Route path="/news" component={News} />
<Route path="/" component={Login} />
末尾使用通配符。
要使用this.props.history.push
,必须在Login类中添加withRouter
export default withRouter(Login);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.