Question

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

谢谢

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>

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

<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

1 个答案: