Question

我正在创建signin / signout页面标头包含登录，注册或注销链接，具体取决于用户是否已登录。登录后，如果用户点击退出链接，则应将其重定向到注销路线。网址正在更改为退出路线，但未注销注销组件。我仍然可以看到signin组件本身。

修改

当我直接在浏览器中输入网址时，注销组件呈现正常。仅当点击登出路线中的链接（react-router-dom中的链接组件）时才会呈现

标题组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

class Header extends Component {
  renderLinks() {
    if(this.props.authenticated) {
      return (
        <li className="nav-item">
          <Link to="/signout" className="nav-link">Sign Out</Link>
        </li>
      );
    }
    else {
      return (
        [
          <li className="nav-item" key={1}>
            <Link to="/signin" className="nav-link">Sign In</Link>
          </li>,
          <li className="nav-item" key={2}>
            <Link to="/signup" className="nav-link">Sign Up</Link>
          </li>
        ]
      );
    }
  }

  render () {
    return (
      <nav className="navbar navbar-light">
        <Link to="/" className="navbar-brand">Redux Auth</Link>
        <ul className="nav navbar-nav">
            {this.renderLinks()}
        </ul>
      </nav>
    );
  }
}

const mapStateToProps = (state) => {
  return { authenticated: state.auth.authenticated };
}

export default connect(mapStateToProps)(Header);

SignIn组件：

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';

import * as actions from '../../actions';

class Signin extends Component {
  handleFormSubmit({ email, password }) {
    console.log(email, password);

    this.props.signinUser({ email, password });
  }

  renderAlert() {
    if(this.props.errorMessage) {
      return (
        <div className="alert alert-danger">
          <strong>Oops!</strong> { this.props.errorMessage }
        </div>
      );
    }
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
        <div className="form-group">
          <label>Email:</label>
          <div>
            <Field
              className="form-control"
              name="email"
              component="input"
              type="text"
            />
          </div>
        </div>
        <div className="form-group">
          <label>Password:</label>
          <div>
            <Field
              className="form-control"
              name="password"
              component="input"
              type="password"
            />
          </div>
        </div>
        {this.renderAlert()}
        <div>
          <button action="submit" className="btn btn-primary">Sign In</button>
        </div>
      </form>
    );
  }
}

const mapStateToProps = (state) => {
  return { errorMessage: state.auth.error };
}

Signin =  reduxForm({
  form: 'signin',
})(Signin);

export default Signin = connect(mapStateToProps, actions)(Signin);

注销组件：

import React, { Component } from 'react';
import Header from './header';

export default class Signout extends Component {

  render() {
    return <div>Sorry to see you go...</div>;
  }
}

主索引文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import reduxThunk from 'redux-thunk';

import App from './components/app';
import Signin from './components/auth/signin';
import Signout from './components/auth/signout';

import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router>
      <div>
        <Route path="/" component={App} />
        <Route path="/signin" component={Signin} />
        <Route path="/signout" component={Signout}/>
      </div>
    </Router>
  </Provider>
  , document.querySelector('.container'));

如果您想查看整个代码。它出现在这个git存储库

https://github.com/sruthisripathi/react-auth

修改

我尝试在Header组件中使用withRouter，如下所示

export default withRouter(connect(mapStateToProps)(Header));

我尝试将道具传递给App组件中的Header

<Header {...this.props} />

但这一切都没有效果。

修改

将登录和注销路由更改为App组件而不是索引文件解决了这个问题。

应用程序组件：

import React, { Component } from "react";
import { Route } from "react-router-dom";
import Signin from "../components/auth/signin";
import Signout from "../components/auth/signout";

import Header from "./header";

export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Route path="/signin" component={Signin} />
        <Route path="/signout" component={Signout} />
        <Route path="/signup" component={Signout} />
      </div>
    );
  }
}

index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import reduxThunk from 'redux-thunk';

import App from './components/app';
import Signin from './components/auth/signin';
import Signout from './components/auth/signout';

import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router>
      <div>
        <Route path="/" component={App} />
      </div>
    </Router>
  </Provider>
  , document.querySelector('.container'));

链接到路线会更改网址，但不会重新呈现组件

0 个答案: