-1

我正在开发一个关于 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;

这是文档路线:

class DocumentationRoutes extends Component {

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

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

export default DocumentationRoutes;

和文档:

class Documentation extends Component {

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

export default Documentation;

它是使用反应路由器的正确方法吗?一键重定向怎么办?在第一次点击时,网址会正确更改,但页面不会更改。

谢谢,

4

1 回答 1

0

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

同样在react-routerv4中IndexRoute不再存在。

class DocumentationRoutes extends Component {

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

export default DocumentationRoutes;
于 2017-09-08T13:31:15.240 回答