Reactjs 使用嵌套导航对JS组件进行响应

我在以下方面遇到了一些问题。我花了几个小时试图通过搜索找到一些帮助，但都是徒劳。可能是我不知道我想做什么，但我想我应该在这里问一下

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

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

这是我想做的一张照片

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

My 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')
);

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

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

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

ReactDOM.render(
,
document.getElementById（'root'））
);

我的项目页面.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')
);

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

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

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

导出默认类ProjectPage扩展组件{
render（）{
返回(
);
}
}

我的项目组件.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')
);

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

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

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

导出默认类项目组件扩展组件{
render（）{
返回(
//这是“我的项目”组件的导航栏
{this.props.children}
);
}
}

我的项目nav.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')
);

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

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

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

导出默认类项目AV扩展组件{
render（）{
返回(
项目1
项目2
项目3
);
}
}

最后 myproject1.jsproject2和&project3几乎是一样的

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

导出默认类Project1扩展组件{
render（）{
返回(
项目1的你好
);
}
}

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

---

非常感谢您的帮助。

项目组件不需要组件，请尝试以下组件：

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

ReactDOM.render(
//
,
document.getElementById（'root'））
);
导出默认类ProjectPage扩展组件{
render（）{
返回(
{this.props.children}
);
}
}
导出默认类ProjectsAV扩展组件{
render（）{
返回(
项目1
项目2
项目3
);
}
}

如果您遇到任何问题或需要任何帮助，请告诉我。
请让我正确回答……您希望应用程序显示链接的组件，而不是导航到另一个页面，对吗？如果是这样，您请求的是React的用途。换句话说，单页应用程序（SPA）。如果这是一个问题，我将提供答案。是的。这正是我正在尝试做的。您需要利用将包含选定项目的父组件中的组件状态。您将将此状态传递给所有项目组件，并且与此状态匹配的一个组件将呈现，而其他组件将不呈现。我现在没有时间oment，但我有时间的时候会发布一个答案。我注意到您的代码有两件事：1）React路由器不支持位置中的相对路径，因此
应该是
。2）您的
中的路径是小写的，而
中的路径名是大写的。我不记得在路线上是否有区分大小写的匹配。谢谢你花时间帮忙。我会试试看我是否能想出如何使用道具。Paul A，我在示例中更改了路径和组件的名称，以使其更通用。这么做的时候，我一定是在标点符号上犯了一两个错误。太棒了！看起来相当清楚。我下班回家后会试试这个。比你好多了。我会告诉你事情的进展。