带有嵌套导航的 React JS 组件

Question

我在以下方面遇到了一些麻烦。我已经尝试了几个小时通过搜索找到一些帮助，但空手而归。可能是我不知道我正在尝试做的事情的名称，但我想我会在这里问。

我已经学习 React 大约一个月了。目前我正在尝试创建一个组件，该组件具有自己的导航栏，并根据单击组件导航栏中的链接来显示其内容。

我有一个整个网站的导航栏，使用 React Router，我尝试将组件的路由嵌套在我希望显示的页面的路由中，但是当我单击所述组件中的链接时，而不是只需在该组件中显示内容，我就会导航到一个新页面（在本例中：localhost3000/#/project1）。该新页面显示了整个组件，并具有正确的内容。但是，我想避免导航到新页面。

这是一张我想做的照片。

这是我目前得到的一些代码。 （我省略了导入和其他任何不必要的内容。

我的 index.js

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={OtherPage}></IndexRoute>
      <Route path="Project_Page" component={ProjectPage} />
      <Route component={ProjectsComponent}>
        <Route path="project1" component={Project1} />
        <Route path="project2" coponent={Project2} />
        <Route path="project3" coponent={Project3} />
      </Route>
      <Route path="Another_Page" component={AnotherPage}></Route>
    </Route>
  </Router>
  ,
  document.getElementById('root')
);

我的 ProjectPage.js

export default class ProjectPage extends Component{
  render(){
    return(
      <div>
         <ProjectsComponent />
      </div>
    );
  }
}

我的 ProjectsComponent.js

export default class ProjectsComponent extends Component{
  render(){
    return(
      <div>
        <ProjectsNav />      // this is the navbar for my projects component
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

我的项目Nav.js

export default class ProjectsNav extends Component{
  render(){
    return(
      <div>
        <Link to="Project1" className="btn btn-primary">Project 1</Link>
        <Link to="Project2" className="btn btn-primary">Project 2</Link>
        <Link to="Project3" className="btn btn-primary">Project 3</Link>
      </div>
    );
  }
}

终于 我的 Project1.js project2 && project3 几乎是一回事。

export default class Project1 extends Component{
  render(){
    return(
      <div className="project">
        Hello from Project 1
      </div>
    );
  }
}

很抱歉，如果这是已经涵盖的内容。如果有，请随时指出我正确的方向。这就是我所需要的。

非常感谢您的帮助。

Answer 1

ProjectsComponent 组件不是必需的，试试这些组件：

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={OtherPage}></IndexRoute>
      <Route path="Project_Page" component={ProjectPage}>
      //<Route component={ProjectsComponent}>
        <IndexRoute path="Project_Page/Project1" component={Project1} />
        <Route path="Project_Page/Project2" coponent={Project2} />
        <Route path="Project_Page/Project3" coponent={Project3} />
      </Route>
      <Route path="Another_Page" component={AnotherPage}></Route>
    </Route>
  </Router>
  ,
  document.getElementById('root')
);


export default class ProjectPage extends Component{
  render(){
    return(
      <div>
         <ProjectsNav />
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}


export default class ProjectsNav extends Component{
  render(){
    return(
      <div>
        <Link to="Project_Page/Project1" className="btn btn-primary">Project 1</Link>
        <Link to="Project_Page/Project2" className="btn btn-primary">Project 2</Link>
        <Link to="Project_Page/Project3" className="btn btn-primary">Project 3</Link>
      </div>
    );
  }
}

如果您遇到任何问题或需要任何帮助，请告诉我。