在react-router-dom中重定向？

自从我开始使用react/redux并且我在使用Redirect组件时，我正在第一次使用react-router-dom应用程序。在react-router-dom中重定向？

我想发射Redirect当验证成功但它不会重定向到我想要验证后的页面。

index.js

import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import { createStore, applyMiddleware } from 'redux'; 
import ReduxThunk from 'redux-thunk'; 

import App from './components/app'; 
import Page1 from './containers/page1'; 
import Signin from './containers/auth/signin'; 

import Reducers from './reducers'; 

const createStoreWithMiddleware = applyMiddleware(ReduxThunk)(createStore); 
const store = createStoreWithMiddleware(Reducers); 

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

signin.js

import { BrowserRouter as Route, Redirect } from 'react-router-dom'; 

import { userSignin } from '../../actions/index'; 

class Signin extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { username: '', password: '' }; 

    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handleUsernameChange = this.handleUsernameChange.bind(this); 
    this.handlePasswordChange = this.handlePasswordChange.bind(this); 
    } 

    componentWillUpdate(nextProps) { 
    if (this.props.authenticated !== nextProps.authenticated) { 
     if (nextProps.authenticated) { 
     console.log('true?', nextProps.authenticated) 
     return (
      <Redirect to="/page1" /> 
     ); 
     } 
    } 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    this.props.userSignin({ username: this.state.username, password: this.state.password }); 
    this.setState({ username: '', password: '' }); 
    } 
    ..... 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <input 
      placeholder="username" 
      value={this.state.username} 
      onChange={this.handleUsernameChange} 
     /> 
     <input 
      placeholder="password" 
      type="password" 
      value={this.state.password} 
      onChange={this.handlePasswordChange} 
     /> 
     <span> 
      <button type="submit">SIGNIN</button> 
     </span> 
     {this.renderError()} 
     </form> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    authenticated: state.auth.authenticated, 
    errMsg: state.auth.err 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    userSignin: ({ username, password }) => dispatch(userSignin({ username, password })) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Signin);

在这段代码，这样做登录true?但它不会重定向到/page1。

正如我所提到的，这是我第一次使用react-router-dom库，对于我在代码中存在的任何愚蠢错误，我表示歉意。

谢谢你，请洞察我！

来源

2017-08-25 ckim16

你说它不会重定向到'/ page1'路线。它到底在哪里？ –

它保留在'/'路线中。 – ckim16

Ook ...尝试使用'精确路径'作为你的'/'路由，因为这将匹配所有其他路由。让我知道这是否可行，以便我可以将其添加到答案中。 '' –

代替Redirect使用this.props.history.push('/path1')，敷connect()在withRouter（从反应路由器进口）是这样的：

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Signin));

如果要使用重定向，维护当地国家认证的价值，更新在componentWillReceiveProps中，并有条件地在渲染方法中渲染<Redirect />。

来源

2017-08-26 01:48:16

在react-router-dom中重定向？

回答

相关问题