开关不是渲染反应组件

Question

我正在尝试检查是否有 cookie（登录）并重定向到 /dashboard。我在 arround Route 上添加了一个 Switch，但它没有渲染组件。如果我删除 Switch，页面不会加载：“超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制嵌套更新的数量以防止无限循环。”

我的代码：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import Layout from '../../components/Layout.js';
import './Login.scss';

const Auth = () => (
  	<Router>
   		<div id="login" className="height100">
	   		<Switch>
	      		<Route  path="/" component={Login}/>
	      		<PrivateRoute exact path="/dashboard" component={Protected}/>
	      	</Switch>
    	</div>
  	</Router>
)

const fakeAuth = {
  	isAuthenticated: false,
  	authenticate(cb) {
  		this.isAuthenticated = true
    	setTimeout(cb, 100) // fake async
	}
}

const PrivateRoute = ({ component: Component, ...rest }) => (
  	<Route {...rest} render={props => (
    	fakeAuth.isAuthenticated ? (
      		<Component {...props}/>
    ) : (
      	<Redirect to={{
       		pathname: '/',
        	state: { from: props.location }
      	}}/>
    )
  	)}/>
)

const Protected = () => <Layout />

class Login extends Component {
 	state = {
    	redirectToReferrer: false
  	}

	setCookie = (cname,cvalue,exdays) => {
	    var d = new Date();
	    d.setTime(d.getTime() + (exdays*24*60*60));
	    var expires = "expires=" + d.toGMTString();
	    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
	}

	getCookie = (cname) => {
 	    var name = cname + "=";
	    var decodedCookie = decodeURIComponent(document.cookie);
	    var ca = decodedCookie.split(';');
	    for(var i = 0; i < ca.length; i++) {
	        var c = ca[i];
	        while (c.charAt(0) === ' ') {
	            c = c.substring(1);
	        }
	        if (c.indexOf(name) === 0) {
	            return c.substring(name.length, c.length);
	        }
	    }
	    return "";
	}

	// checkCookie() {
	//     var redirect = this.getCookie("redirectToReferrer");
	//     if (redirect) {
	//     } else {
	//         this.setCookie("redirectToReferrer", true, 30);
	//     }
	// }

 	login = (e) => {
 		e.preventDefault();
 		const that = this;

		const data = {
			'username': this.username.value,
			'password': this.password.value
		}

		const checkLogin = function(e) {
			if(e.username === data.username && e.password === data.password) {
			    fakeAuth.authenticate();
				that.setState({ redirectToReferrer: true });
				that.setCookie("redirectToReferrer", true, 30);
			} else {
				alert('fail');
			}
		}

		fetch('http://maiconfurtado.com.br/test.json').then(r => r.json())
			.then(e => checkLogin(e))
			.catch(e => alert(e.message));
  	}

  	render() {
	    const { from } = this.props.location.state || { from: { pathname: '/dashboard' } };
	    const { redirectToReferrer } = this.state;
	    const redirect = this.getCookie("redirectToReferrer");

	    if (redirectToReferrer || redirect) {
	      	return (
	        	<Redirect to={from} />
	      	)
	    }

	    return (
			<div className="box-login col-10 col-10-sm center-block">
				<form className="col-9 col-10-xs center-block" onSubmit={this.login}>
					<div className="input-group">
						<label htmlFor="username">E-mail</label>
						<input type="text" className="input" id="username" name="username" ref={node => this.username = node} required />
					</div>
					<div className="input-group">
						<label htmlFor="password">Password</label>
						<input type="password" className="input" id="password" name="password" ref={node => this.password = node} required />
					</div>
					<div className="input-group">
						<input type="submit" id="submit" value="Log in" />
					</div>
				</form>
			</div>
	    )
	}
}

export default Auth

我还有另一个问题：警告：您尝试重定向到您当前所在的同一路线：“/dashboard”

Answer 1

检查你的答案是否在这里react-router by Tyler Mcginnis