代码之家 › 专栏 › 技术社区 › Mesmerize86

嵌套React路由器v4

react-router-redux react-router-v4 reactjs

Mesmerize86 · 技术社区 · 8 年前

我的路由器有问题。谁能帮帮我吗。我在模式库中嵌套了路由器。当我点击链接时,即使我设置了正确的路径,它也会转到主页。

非常感谢。

指数js公司

<Provider store={store} >
<Router>
  <App />
</Router>

应用程序。js公司

<Switch>
          <Route exact path='/' component={HomePage}/>
          <Route exact path='/about-me' component={AboutMePage}/>
          <Route exact path='/pattern-library' component={PatternLibrary}/>
          <Redirect to="/" />

模式库。js公司

const PatternLibrary = ({ match }) => {return(
<div className='patternLibraryPage Page'>
  <ThemePanel />
  <div className='wrapper'>
    <Header />
    <Navigation />
    <switch>
      <Route path={match.path} exact component={DesignComponent} />
      <Route path={`${match.path}/design-component`} exact component={DesignComponent} />
    </switch>
  </div>
</div>);};

航行js公司

class Navigation extends React.Component {constructor(props){
super(props);
this.state = {
  collapse : false,
  navTitle : 'Design Element'
};}                                             
onClickCollapseMenu(e){
e.preventDefault();
this.setState({ collapse: !this.state.collapse });} 
onClickSetTitle(title){
this.setState({
  navTitle : title
});}                                                            
render () {
return(
  <nav className='nav'>
    <div className='container'>
    <div className='navbar-header'>
      <button type='button' className='navbar-toggle collapsed' onClick={this.onClickCollapseMenu.bind(this)}>
        <span className='sr-only'>Toggle navigation</span> Menu <i className='fa fa-bars'></i>
      </button>
      <a className='navbar-brand page-scroll' href='#page-top'>{this.state.navTitle}</a>
    </div>

    <div className={classnames('collapse navbar-collapse', { 'in' : this.state.collapse})}>
      <ul className='navbar navbar-nav navbar-right'>
        <li><NavLink to='/pattern-library/design-component' activeClassName="active" className='navbar-link' onClick={this.onClickSetTitle.bind(this, 'Design Elements')}>Design Components</NavLink></li>
        <li><NavLink to='/pattern-library/ui-components' activeClassName="active" className='navbar-link' onClick={this.onClickSetTitle.bind(this, 'Design Elements')}>UI Components</NavLink></li>
        <li><NavLink to='/pattern-library/js-components' activeClassName="active" className='navbar-link' onClick={this.onClickSetTitle.bind(this, 'Design Elements')}>JS Components</NavLink></li>
        <li><NavLink to='/pattern-library/scss-components' activeClassName="active" className='navbar-link' onClick={this.onClickSetTitle.bind(this, 'Design Elements')}>SCSS Components</NavLink></li>
      </ul>
    </div>
    </div>
  </nav>
);}}

1 回复 | 直到 8 年前

Chase DeAnda 8 年前

这是因为您已将路线设置为与路径完全匹配:

<Route exact path='/pattern-library' component={PatternLibrary}/>

但您尝试使用其他路径路由到它:

<NavLink to='/pattern-library/design-component' >Design Components</NavLink>

您只需在路由配置中添加一个参数占位符:

<Route exact path='/pattern-library/:library' component={PatternLibrary}/>

我看到的另一个问题是,您需要将 <Switch> 在PatternLibrary中。js公司

编辑:

好吧,我忘了嵌套路线了。在这种情况下,您是对的,不需要占位符。通过删除 exact 参数它应该仍然匹配,然后通过您的切换进入 PatternLibrary . 你的第二条路线是正确的:

<Route path="pattern-library/design-component" exact component={DesignComponent} />

您需要提供完整的路径,因此 pattern-library/design-component 而且不仅仅是 design-component .