嵌套 React Router v4

Question

我的路由器有问题。有人可以帮帮我吗。我在我的模式库中嵌套了路由器。当我点击 link 时，即使我设置了正确的路径，它也会转到主页。

谢谢

Index.js

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

App.js

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

PatternLibrary.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>);};

Navigation.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>
);}}

Answer 1

这是因为您的路由设置与路径完全匹配：

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

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

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

您需要做的就是在您的路由配置中添加一个参数占位符：

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

我看到的另一个问题是您需要将 PatternLibrary.js

中的 <Switch> 大写

编辑：

好吧，我忘记了嵌套路由。在那种情况下你是对的，你不需要占位符。通过删除 exact 参数，它应该仍然匹配，然后落入 PatternLibrary 中的开关。你的第二条路线是正确的：

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

您需要提供完整路径，所以它是 pattern-library/design-component 而不仅仅是 design-component。

嵌套 React Router v4

Nested React Router v4

reactjs

react-router-v4

react-router-redux