Javascript 使用react路由器和镭的路由问题

Javascript 使用react路由器和镭的路由问题,javascript,reactjs,react-router,radium,Javascript,Reactjs,React Router,Radium,我正在制作一个关于reactJS的网站。我使用镭和反应路由器进行路由。 我的路线有很多问题 在我的主页上有一个固定导航栏菜单,带有指向文档页面的链接 在此文档页面上,我也有此栏,但要访问其他链接,我必须单击2次才能到达 class App extends Component { render() { return ( <Router history={hashHistory}> <Switch>

我正在制作一个关于reactJS的网站。我使用镭和反应路由器进行路由。 我的路线有很多问题

在我的主页上有一个固定导航栏菜单,带有指向文档页面的链接

在此文档页面上,我也有此栏,但要访问其他链接,我必须单击2次才能到达

 class App extends Component {

      render() {
        return (
          <Router history={hashHistory}>
            <Switch>
              <Route exact path="/" component={LandingPage}/>
              <Route path="/documentation" component={DocumentationRoutes}/>
              <Route path="/blog" component={OnContrustion}/>
              <Route path="/contactus" component={OnContrustion}/>
            </Switch>
          </Router>
        );
      }
    }

    export default App;
类应用程序扩展组件{
render(){
返回(
);
}
}
导出默认应用程序;
以下是文档路线:

class DocumentationRoutes extends Component {

  render() {
    return (
      <Router history={hashHistory}>
        <Switch>
          <Route path="/documentation" component={Documentation}/>
          <IndexRoute component={Documentation} />

        </Switch>
      </Router>
    );
  }
}

export default DocumentationRoutes;
class DocumentationRoutes扩展组件{
render(){
返回(
);
}
}
导出默认文档路径;
以及文件:

class Documentation extends Component {

  render() {
    return (
    <VerticalLayout>
      <StretchLayout>
        <NavBar />
        </StretchLayout>
        <StretchLayout margin="20">
          <CenterLayout>
            <SubTitle>Documentation</SubTitle>
          </CenterLayout>
          <DocMenu />
        </StretchLayout>
      </VerticalLayout>
    );
  }
}

export default Documentation;
类文档扩展了组件{
render(){
返回(
文档
);
}
}
导出默认文档;
这是使用react路由器的正确方法吗? 单击一次后,如何重定向? 第一次单击时,url会正确更改,但页面不会更改


谢谢,

您只需要在初始路由定义中使用
路由器
组件。您的
DocumentationRoutes
组件应该是:

同样在
react路由器
v4
IndexRoute
中不再存在

class DocumentationRoutes extends Component {

  render() {
    return (
        <Switch>
          <Route path="/documentation" component={Documentation}/>
          <Route component={Documentation} />    
        </Switch>
    );
  }
}

export default DocumentationRoutes;
class DocumentationRoutes扩展组件{
render(){
返回(
);
}
}
导出默认文档路径;

您有嵌套路由器吗?这似乎不对。您应该有一个带有嵌套路由的路由器,每个路由都应该有一个组件,它是某种视图,同样,不是路由器。