具有反应路由器的嵌套路由

Question

我很反应。我正在使用typescript-react（.tsx）。我在嵌套路线上挣扎。如果url像file：/// D：/original/22-02-2017/app.html#/job-home 那么＆＃34; horMenu＆＃34;组件将加载，因为只有一个水平菜单可用。并且在＆＃34; Jobpage＆＃34;的索引路径中。组件将加载。它工作正常。但是在水平菜单中，当我点击Approvals时，＆＃34; Approvals＆＃34;组件应该加载，并且内部另一个组件应该加载名为＆＃34; ThirdMenu＆＃34;。内部＆＃34; ThirdMenu＆＃34;组件＆＃34; ThirdMenuData＆＃34;组件应该加载。简而言之，当我点击＆＃34; Approvals＆＃34;三个组件应该同时加载。

我的路由代码如下：

＆＃13;

＆＃13;

<Router history={hashHistory}>
      <Route path="/" component={App}>
        <Route path="job-home" component={horMenu} >
          <IndexRoute component={JobPage} />
          <Route path="/approvals" component={Approvals}>
            <Route path="/" component={ThirdMenu}>
                <IndexRoute component={ThirdMenuData} />
            </Route>
          </Route>
        </Route>
      </Route>
    </Router>

＆＃13;

＆＃13;

＆＃13;

我的组件代码如下：

认证

＆＃13;

＆＃13;

export var Approvals = React.createClass({
   getInitialState: function()
    {    
       return(
        {
            "secondmenudata":[
                            {"name":"STEPS","id":1,"url":"steps"},
                            {"name":"RFI","id":2,"url":"rfi"},
                            {"name":"NCR","id":3,"url":"ncr"},
                            {"name":"SIGN-OFFS","id":4,"url":"sign-offs"}
                        ]
        });
    },
	render: function() {
		return (
			<div>
				<ul className="nav nav-pills tab-2" role="tablist">
				   {
						this.state.secondmenudata.map(function(name:any) 
						{
							return <li  key={name.id}><Link to={"/"+name.url} >{name.name}</Link></li>
						})
					}  
				</ul>
        <div className="scrolling-tabs-container3" >
            {this.props.children}
        </div>
			</div>
		);
	}
});

＆＃13;

＆＃13;

＆＃13;

ThirdMenu

＆＃13;

＆＃13;

export var ThirdMenu = React.createClass({
    getInitialState:function()
    {
      return{
        "thirdmenudata":[
                            {"name":"Unit 1","id":1,"url":"unit1"},
                            {"name":"Unit 2","id":2,"url":"Unit2"},
                            {"name":"Unit 3","id":3,"url":"Unit3"},
                            {"name":"Unit 4","id":4,"url":"Unit4"},
                            {"name":"Unit 5","id":5,"url":"Unit5"},
                            {"name":"Unit 6","id":6,"url":"Unit6"},
                            {"name":"Unit 7","id":7,"url":"Unit7"},
                            {"name":"Unit 8","id":8,"url":"Unit8"}
                        ]
      };
    },
    render:function()
    {
        return(
            <div>
                <div >
                  <ul className="nav nav-pills tab-3" role="tablist">
                      {
                          this.state.thirdmenudata.map(function(name:any) 
                          {
                                return <li  key={name.id}><Link  role="pill" data-toggle="pill" to={"/"+name.url} >{name.name}</Link></li>
                          })
                      }  
                  </ul>
                </div>
                <div>{this.props.childern}</div>
            </div>
        );
    }
});

＆＃13;

＆＃13;

＆＃13;

ThirdMenuData

＆＃13;

＆＃13;

export var ThirdMenu = React.createClass({
   
    render:function()
    {
        return(
            <div>
                <h1>this is approval Data</h1>
            </div>
        );
    }
});

＆＃13;

＆＃13;

＆＃13;

Plz帮助我的代码出了什么问题

已更新

但是当我按照以下路线

时

<Router history={hashHistory}>
      <Route path="/" component={App}>
        <Route path="job-home" component={horMenu} >
             <IndexRoute component={JobPage} />
             <Route path="/approvals" component={Approvals}>
               <Route  component={ThirdMenu}>
                  <IndexRoute component={ThirdMenuData} />
             </Route>
       </Route>
      </Route>

    </Router>

然后只有最后一个组件＆＃34; ThirdMenuData＆＃34;没有显示

我的结构应该是这样的

Answer 1

您的路线有问题。您不能在/下拥有/approvals路由，因为这是<IndexRoute />的本质。

见下文修改路线

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="job-home" component={horMenu} >
      <IndexRoute component={JobPage} />
      <Route component={Approvals}>
        <Route path="approvals" component={ThirdMenu}>
          <IndexRoute component={ThirdMenuData} />
        </Route>
      </Route>
    </Route>
  </Route>
</Router>

使用给定的嵌套配置，当您到达domain.com/job-home/approvals

时，菜单应显示出来

修改

追加其他路线

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="job-home" component={horMenu} >
      <IndexRoute component={JobPage} />
      <Route path="approvals" component={Approvals}>
        <Route path="third-menu" component={ThirdMenu}>
          <IndexRoute component={ThirdMenuData} />
        </Route>
      </Route>
    </Route>
  </Route>
</Router>

Answer 2

这是React Router的旧版本。现在我们可以使用简单React router v4 or React Router Dom的动态版本。

在这种情况下，子路由会在要显示其路由组件的适当组件内使用。