Question

该组件应该在登录后重定向到主页，但是在此之前起作用，然后突然根本不起作用，重定向继续回到root（'/'）

这是 index.js 中的代码（我使用的是Material-Kit主题）：

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch } from "react-router";
import indexRoutes from "routes/index.jsx";
import "assets/scss/material-kit-react.css?v=1.1.0";

var hist = createBrowserHistory();

ReactDOM.render(
    <Router history={hist}>
      <Switch>
        {indexRoutes.map((prop, key) => {
          return <Route path={prop.path} key={key} component= 
{prop.component} />;
        })}
      </Switch>
    </Router>,
  document.getElementById("root")
);

这是在index.jsx内部

var indexRoutes = [
  { path: "/login-page", name: "LoginPage", component: LoginPage },
  { path: "/register-page", name: "RegisterPage", component: RegisterPage },
  { path: "/home-page", name: "HomePage", component: Home},
  { path: "/", name: "LandingPage", component: LandingPage  }

];

export default indexRoutes;

在登录页面

中

class LoginPage extends React.Component {
  constructor() {
    super();
    this.state = {
      cardAnimaton: "cardHidden",
      signInEmail: "",
      signInPassword: "",
      isSignIn: false,
      errorLogin: "",
      user: {
        id: "",
        name: "",
        email: "",
        joined: ""
      }
    };
  }

  //load user
  loadUser = (data) => {
    // update user
    this.setState({
      user: {
        id: data.id,
        name: data.name,
        email: data.email,
        joined: data.joined
      }
    })
  }


  onEmailChange = (event) => {
    this.setState({ signInEmail : event.target.value})
  }

  onPasswordChange = (event) => {
    this.setState({ signInPassword : event.target.value})
  }

  //submit change
  onSubmitSignIn = () => {
    fetch('http://localhost:3001/signin', {
      method: 'post',
      headers: {'Content-Type' : 'application/json'},
      body: JSON.stringify({
        email: this.state.signInEmail,
        password: this.state.signInPassword
      })
    })
      .then(response => response.json())
      .then( user => {
        if(user.id){
          this.loadUser(user)
          this.setState({ isSignIn: true})
        }else{
          this.setState({ errorLogin: "Please check your email and password"})
        }
      })
  }

  render() {
    const { classes, ...rest } = this.props;
    const { errorLogin } = this.state;

    if( this.state.isSignIn === true){
      return <Redirect 
      to="/home-page" />
    }

    return (
      <div>
        <div
          className={classes.pageHeader}
        >
         <Particles className={classes.particles}
          params={ particlesOptions}
          /> 
          <div className={classes.container}>
            <GridContainer justify="center">
              <GridItem xs={12} sm={12} md={4}>
                <Card className={classes[this.state.cardAnimaton]}>
                  <form className={classes.form}>
                    <CardHeader className={classes.cardHeader}>
                      <h3>Login</h3>
                    </CardHeader>

                    <CardBody className={classes.cardbody}>
                      <FormControl fullWidth className={classes.signinform}>
                        <InputLabel htmlFor="email-address">Email</InputLabel>
                        <Input

                          type="email"
                          name="email-address"
                          id="email-address"
                          onChange={this.onEmailChange}
                          endAdornment={
                            <InputAdornment position="end">
                              <Email className={classes.inputIconsColor}/>
                            </InputAdornment>
                          }
                        />
                        <InputLabel htmlFor="password" className={classes.passwordlabel}>Password</InputLabel>
                        <Input
                          type="password"
                          name="password"
                          id="password"
                          onChange={this.onPasswordChange}
                          endAdornment={
                            <InputAdornment position="end">
                              <LockOutline className={classes.inputIconsColor}/>
                            </InputAdornment>
                          }
                        />
                      </FormControl>
                    </CardBody>
                    {(errorLogin) ? 
                      <SnackbarContent 
                        message={errorLogin}
                        className={classNames(classes.root, classes.message)}
                      /> 
                      : "" 
                    }

                    <CardFooter className={classes.cardFooter}>
                    <p className={classes.divider}>Don't have an account?
                    <Link to='/register-page'>
                    Register
                    </Link>
                    </p>
                    <div className={classes.buttonplace}>
                      <Button className={classes.buttonsingin} size="sm" onClick={this.onSubmitSignIn} >

                        Sign In
                      </Button>
                    </div>
                    </CardFooter>

                  </form>
                </Card>
              </GridItem>
            </GridContainer>

          </div>
        </div>
      </div>
    );
  }
}

当我直接尝试它起作用时，但是尝试在登录页面中进行操作之后，路径暂时更改为/ home-page然后返回到/，我不知道为什么它突然不起作用是因为它之前起作用了，没有错误

Answer 1

如果您将其带到Landing Page组件，则无论输入哪种路径。您必须在路线中使用exact。就您而言，它始终呈现"/"相应的组件。试试这个：

 <Router history={hist}>
  <Switch>
    {indexRoutes.map((prop, key) => {
      return <Route exact path={prop.path} key={key} component= 
       {prop.component} />;
    })}
  </Switch>
</Router>,

让我知道问题是否仍然存在。很高兴为您提供帮助。

Answer 2

这是一个愚蠢的错误，是<Redirect/>的问题，在我的home组件中有一个带有重定向组件的标头，该标头应该返回到根页面（用于注销），因此每次我尝试呈现/ home时总是触发<Redirect/>

在反应路由器中重定向无法呈现组件

2 个答案: