Question

我在Dashboard组件上展示了左侧，并在其旁边显示了当前所选页面的占位符。链接按预期更改URL，例如dashnoard/permissions，但不呈现权限组件。但是，如果手动刷新页面，它将起作用。这是我现在正在尝试的。

class App extends Component {

  render() {
    return (
      <Router>
        <MultiThemeProvider>
          <div className="App" id="siteWrap">
            <AppBar title="DiversityEDU" />
            <switch>
              <Route exact={true} path="/"  component={Home}/>
              <Route exact={true} path="/login" handler={Login} component={Login}/>
              <Route path="/dashboard" component={Dashboard}/>
            </switch>
          </div>
        </MultiThemeProvider>
      </Router>
    );
  }
}

class Dashboard extends Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <Router>
        <div id="dashboardWrap" style={style.dashboardWrap}>
          <Sidebar links={links}/>
          <div style={style.dashboardContent}>
            <p>Dashboard has rendered</p>
            <switch>
              <Route exact={true} path="/dashboard/roles" component={Roles}/>
              <Route exact={true} path="/dashboard/permissions" component={Permissions}/>
            </switch>
          </div>
        </div>
      </Router>
    );
  }
}

我也在这个项目中使用Redux，但不是直接在上面的组件中。

const AppContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Answer 1

将开关指定给每个组件路线，然后从完全删除={true}，然后将exact添加到仪表板路线

Answer 2

在组件中使用上下文路由器来更改路由。

constructor(props,context){
super(props,context)
}
this.context.router.history.push({pathname:sth/sth})

Dashboard.contextTypes = {
router: PropTypes.object.isRequired
}

React Router不会在点击时重新渲染组件，而是在刷新时工作

2 个答案: