Question

我在两个页面上实现了侧边栏导航：仪表板和学习。

侧边栏在“仪表板”页面上按预期工作，将我定向到右侧页面。但是，在“研究”页面上，单击链接之一时，URL会更改，但视图不会更改。它只是停留在同一页面上，好像什么也没发生。当我手动刷新时，它可以工作。

由于我也将Redux用于身份验证和获取登录的用户ID，因此每个需要访问商店的组件都具有withRouter（）导出。但这仍然行不通。

以下是相关代码： App.js

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">

            <Route exact path="/" component={Landing} />

            <Route exact path="/login" component={Login} />
            <Route exact path="/signup" component={Register} />

            <Route path="/studies" component={SidebarDashboard} />
            <Route exact path="/studies" component={Dashboard} />
            <Route path="/studies/:id" component={Study} />

          </div>
        </Router>
      </Provider>
    );
  }
}
export default App;

Sidebar.js

class SidebarDashboard extends Component {
.
.
.

<Link to={'/studies/' + study.study._id}>
     <ListItem button>
           <ListItemText disableTypography inset primary={study.study.study_name} />
     </ListItem>
</Link>
.
.
.
const mapStateToProps = state => ({
    userID: state.auth.user.id
});

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

Dashboard.js

class Dashboard extends React.Component {
.
.
.
render() {
        return (
            <div>
                <HeaderDashboard />
                <Overview studies={this.state.studies} />
                <StudyList studies={this.state.studies} />
            </div >
        )
    }
}

const mapStateToProps = state => ({
    userID: state.auth.user.id
});

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

Study.js

class Study extends React.Component {
.
.
.
const mapStateToProps = state => ({
    userID: state.auth.user.id
});

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

所以基本上我想知道在Dashboard上链接正确工作的可能性，而在Study上，相同的链接不起作用。我很困惑。我的意思是，SidebarDashboard组件在两个页面上都保持不变。

React Router-侧边栏不适用于所有页面

0 个答案: