Question

我希望在反应路由器v4中使用NavLink组件非常简单，但也许我的组件按照应有的方式连接。无论如何，我将NavBar放在它自己的组件中，单击NavBar时没有任何事情发生......

<nav style={styles.sidebar}>
  <div style={styles.logoWrapper}>
    <span>Logo</span>
  </div>
  <ul style={styles.ulList}>
    <NavLink style={styles.sidebarItem} activeStyle={{backgroundColor: 'white', color: '#313c59'}} to="/app/editor/basicInfo">
      <FontAwesome
        size='3x'
        border={false}
        name="wrench"
        style={{marginBottom: 10}}
      />
      Editor
    </NavLink>
    <NavLink style={styles.sidebarItem} activeStyle={{backgroundColor: 'white', color: '#313c59'}} to="/app/utilities">
      <FontAwesome
        size='3x'
        border={false}
        name="anchor"
        style={{marginBottom: 10}}
      />
      Utilities
    </NavLink>
    <NavLink style={styles.sidebarItem} activeStyle={{backgroundColor: 'white', color: '#313c59'}} to="/app/settings">
      <FontAwesome
        size='3x'
        border={false}
        name="cog"
        style={{marginBottom: 10}}
      />
      Settings
    </NavLink>
  </ul>
</nav>

但是我不知道这是不是奇怪的地方，并且如果其他人有更好的设计模式会感兴趣...但我的很多应用可能有也可能没有导航栏，或者它可能是完全不同的，所以我创建了一个组件，用于确定要立即渲染的栏...

//inside componentDidUpdate()
const path = window.location.pathname.split('/')[1];

if (path === "app") {
  this.setState({onLandingPage: false})
}

if (path != "app") {
  this.setState({onLandingPage: true})
}

//inside render func
<div>
  { (this.state.onLandingPage) ? <NavBar /> : <EditorNavBar /> }
</div>

这很简单，它只是检查第一个路径名，然后再渲染。这部分工作，但是它弄乱了以某种方式下来的道具。任何智慧或想法都会很棒！

更新

这里也是我如何将组件包裹在底部...这是第一次使用Radium，因此有很多包装：

const connector = connect(mapStateToProps, mapDispatchToProps);

export default withRouter(connector(Radium(EditorNavBar)));

Answer 1

由于Update Blocking，NavBar尚未更新。尝试使用withRouter包装NavBar。这将在位置更改时重新渲染组件。

P.S。选择正确的NavBar的一种更简洁的方法是使用Routes（这可以消除对withRouter的需要，因为组件将像任何其他路径一样在路径更改时重新渲染）：

<Switch>
  <Route exact path="/app" component={EditorNavBar}/>
  <Route component={NavBar}/>
</Switch>

无法获得与React Router v4一起使用的活动链接

1 个答案: