Question

在我的反应应用程序中，我在互联网上尝试了很多不同的路由器，路由和解决方案。

事实上，我正在使用<HashRouter>中的react-router-dom和我的应用中的redux。

当我在浏览器中更改url时，会触发正确的路径并加载正确的组件。

问题：

当我点击<Link>组件更改网址时，路由器上的history道具会发生变化，但应用中没有任何内容发生...

以下是我的应用架构和代码：

MainApp.jsx

render(){
  <Provider store={store}>
    <HashRouter>
       <div className="main-app">
         <StickyContainer> 
           <Header toggleHelp={() => this.toggleOverlay()} />
           <Sticky>
                 <Toolbar /> //Here are my <Link/>     
           </Sticky>  
           <App/>
           <Footer />
         </StickyContainer>
       </div>
     </HashRouter>
  </Provider>
}

App.js

import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from 'Actions';
import Main from 'Components/Main/Main';
import {withRouter} from 'react-router-dom';

const App = ({elements, actions,documents,filters}) => (
    <div>
      <Main elements={elements} actions={actions} documents={documents} filters={filters} />
    </div>
)

const mapStateToProps = state => ({
    elements: state.elements,
    documents: state.documents,
    filters:state.filters
});

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(Actions, dispatch)
});

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

最后我的 Main.jsx

render(){
   <div className="main-authenticated">
       <Switch>
          <Route path="/home" component={Home} />
          <Route path="/reporting" component={Reporting} />
          <Route path="/about" component={About} />
          <Route path="/disconnect" component={ErrorPage} />
       </Switch>
   </div>
}

我已尝试使用BrowserRouter，Router history，但始终存在此问题。不知道这是由于我的项目架构还是其他原因。

更新

在Main.jsx上移动了withRouter并遇到了同样的问题。

Main.jsx

render(){
   <div className="main-authenticated">
       <Switch>
          <Route path="/home" component={Home} />
          <Route path="/reporting" component={Reporting} />
          <Route path="/about" component={About} />
          <Route path="/disconnect" component={ErrorPage} />
       </Switch>
   </div>
}

export default withRouter(Main)

Answer 1

正如@ShubhamKhatri所说，我需要使用withRouter中的react-router函数导出我的主要组件。

但是还有一个问题，由于来自Link的{{1}}组件，Toolbar组件中包含的Sticky未触发路由器。

删除react-sticky上的Sticky组件包装器，以解决问题。

最终解决方案：

导出Main.jsx

MainApp

MainApp.jsx

class Main 
[...]

export default withRouter(Main);

React Link不会触发路由器更改

1 个答案: