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

我的ProjectsNav.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＆amp;＆amp; 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>
    );
  }
}

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

使用嵌套导航反应JS组件

1 个答案: