react-router-dom 仅适用于重新加载 [英] react-router-dom only works on reload

问题描述

我在使用 react-router-dom 进行极其简单的重定向时遇到问题.

当我单击触发重定向的 div 时，当前组件消失.URL 更改为适当的路由.但是新组件没有出现.如果我重新加载页面，我会得到新的组件.怎么回事?

这是继续的组件:

从'react'导入React；从'react-redux'导入{连接}；导入'./BoardPost.css';从'../../actions/quiz'导入{getNewQuiz}；从'react-router-dom'导入{重定向}；导出类 BoardPost 扩展了 React.Component {handlePostClick() {console.log(this.props.quiz.id)this.props.dispatch(getNewQuiz(this.props.quiz.title))}使成为() {如果(this.props.quizActive){return ;}别的 {返回 (<div className="board-post";onClick={() =>this.handlePostClick()}><img className="board-post-image";alt=行星图像"src={this.props.quiz.image}/>

)}}}const mapStateToProps = state =>({quizActive: state.answers.length >0});导出默认连接(mapStateToProps)(BoardPost)；

这是包装器组件，包括不同的路由:

export class App extends Component {使成为() {返回 (
<标题/><路由精确路径=/";组件={板}/><路由精确路径=/quiz";组件={测验}/><页脚/>
);}}

当我点击 className="board-post" 的 div 时，我应该被重定向.但是我只有在重新加载后才能看到新组件.旧组件消失，新路由出现在 URL 栏中，但在我手动重新加载页面之前没有新组件.

解决方案

I was missing export default withRouter(connect(mapStateToProps)(App));在包装器组件的底部.

I am having trouble with an extremely simple redirect with react-router-dom.

When I click a div that triggers a redirect, the current component disappears. The URL changes to the appropriate route. But the new component does not appear. If I reload the page, I get the new component. What's going on?

Here is the component that cont:

import React from 'react'; 
import { connect } from 'react-redux'; 
import './BoardPost.css'; 
import { getNewQuiz } from '../../actions/quiz'; 
import { Redirect } from 'react-router-dom';

export class BoardPost extends React.Component {

    handlePostClick() {
        console.log(this.props.quiz.id)
        this.props.dispatch(getNewQuiz(this.props.quiz.title))      
    }

    render() {
        if (this.props.quizActive) {
            return <Redirect to="/quiz" />; 

        }
        else {
            return ( 
                <div className="board-post" onClick={() => this.handlePostClick()}> 
                    <img className="board-post-image" alt="planet image" src={this.props.quiz.image} />
                </div>
            )
        }
    }
}

const mapStateToProps = state => ({
    quizActive: state.answers.length > 0
}); 

export default connect(mapStateToProps)(BoardPost); 

Here is the wrapper component, which includes the different routes:

export class App extends Component {
  
  render() {
    return (
      <div className="App">
        <Header />
        <Route exact path="/" component={Board} />
        <Route exact path="/quiz" component={Quiz} />
        <Footer />
      </div>
    );
  }
}

When I click the div with className="board-post", I should be redirected. But I only see the new component once I reload. The old component disappears, the new route appears in the URL bar, but no new component until I reload the page manually.

解决方案

I was missing export default withRouter(connect(mapStateToProps)(App)); at the bottom of the wrapper component.

这篇关于react-router-dom 仅适用于重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！