javascript – 为什么React-router v4不起作用(更改网址但不提取内容)？

我有服务器端React / Redux / Express应用程序.
React-router v4为使用Switch的服务器应用程序提供解决方案,我需要使用一些东西来改变我的NavBar组件的位置

应用

import React,{ Component } from 'react'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { Switch,Route,Redirect,Link} from 'react-router-dom'
import FirstPage from './FirstPage'
import Test from './Test'
import LoginPage from './login/LoginPage'
import NoMatch from '../components/NoMatch'
import NavBar from '../components/NavBar'

import * as loginActions from '../actions/login'

import 'bootstrap/dist/css/bootstrap.css';

class App extends Component {

  render(){
    return (
      irstPage/>)}/>
              irst" render={loginRedirect(irstPage/>)}/>
              irst'}>FirstetoProps = state => ({
    login: state.login,error: state.error,isLoading: state.isLoading,})

const mapdispatchToProps = dispatch => ({
    loginActions: bindActionCreators(loginActions,dispatch)
})

export default connect(
    mapStatetoProps,mapdispatchToProps
)(App)

需要改变
的NavBar

import React from 'react'
import { Link,NavLink } from 'react-router-dom'

import classnames from 'classnames'

const NavBar =()=> {
    return (
        

如果我从浏览器URL手动导航它的工作就好了,但如果我点击链接或NavLink网址更新但不是应用程序切换.当loginRedirect到/ login它没有出现并且需要刷新页面时我也遇到了问题(可能这两个是相关的).
如何解决这个问题？

最佳答案

我认为这里的问题是使用redux ..因为只要道具没有改变,它就会阻止重新渲染组件,

This is because connect() implements shouldComponentUpdate by default,assuming that your component will produce the same results given the same props and state.

The best solution to this is to make sure that your components are pure and pass any external state to them via props. This will ensure that your views do not re-render unless they actually need to re-render and will greatly speed up your application.

If that’s not practical for whatever reason (for example,if you’re using a library that depends heavily on React context),you may pass the pure: false option to connect():

function mapStatetoProps(state) {
  return { todos: state.todos }
}

export default connect(mapStatetoProps,null,{
  pure: false
})(TodoApp)

这里有更多解释的链接：

react-redux troubleshooting section

react-router DOCS

原文地址：https://www.jb51.cc/js/429177.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。