Question

我正在尝试使用侧栏和标题构建具有2级导航的反应应用程序。当我使用链接导航时一切正常。但是当我尝试直接在浏览器地址栏中输入地址时。级别工作但标题不起作用。对于标题，整个页面消失，我看到一个空白页面。

我是新手做出反应，所以非常感谢任何关于我可能做错的建议。

该应用程序如下所示

级别1
标题1 标题2标题3
这是Level1 / Header1
Level2的
Level3

我定义的路线如下：

<Route path="/" component={App}>
  <Route path="Level1" component={Level1}>
    <Route path="Header1" component={Page1}/>
    <Route path="Header2" component={Page2}/>
    <Route path="Header3" component={Page3}/>
  </Route>
  <Route path="Level2" component={Level2}/>
  <Route path="Level3" component={Level3}/>
</Route>

SideBar组件的代码是：

export default class SideBar extends React.Component{
  render(){
    return (
      <nav className="nav navbar-default">
          <ul className="nav nav-pills nav-stacked" >
            <li><Link activeClassName="active" to="/Level1">Level1</Link></li>
            <li><Link activeClassName="active" to="/Level2">Level2</Link></li>
            <li><Link activeClassName="active" to="/Level3">Level3</Link></li>
          </ul>
      </nav>
    );
  }
}

标题组件的代码是：

export default class Header extends React.Component{
  render() {
    return (
      <div>
        <nav className="navbar navbar-default">
      <ul className="nav navbar-nav">
        <li ><Link activeClassName="active" to="/Level1/Header1">Header1</Link></li>
        <li ><Link activeClassName="active" to="/Level1/Header2">Header2</Link></li>
        <li ><Link activeClassName="active" to="/Level1/Header3">Header3</Link></li>
          </ul>
        </nav>
      </div>
    );
  }
}

Level1组件是标头的使用位置，如下所示：

export default class Level1 extends React.Component{

        render(){
            return(
                <div >
                    <Header/>
                    {this.props.children}
                </div>
                );
        }
    }

Answer 1

我试图复制您的代码this is the far I can get。

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Level1} />
      <Route path="Level1" component={Level1}>
        <IndexRoute component={Page1} />
        <Route path="Header1" component={Page1} />
        <Route path="Header2" component={Page2} />
        <Route path="Header3" component={Page3} />
      </Route>
      <Route path="Level2" component={Level2} />
      <Route path="Level3" component={Level3} />
    </Route>
  </Router>,
  document.getElementById('root')
);

直接从浏览器地址栏访问时，React路由器返回空白页

1 个答案: