发现切换tab这种用react-router比较合理：

理论：

创建tab：

import React from 'react';
import ReactDOM from 'react-dom';
import {Router , Route , IndexRoute , browserHistory} from 'react-router';
import { Layout, Menu, Breadcrumb, Icon,Table, Input,Button, Popconfirm,Alert,Form } from 'antd';
const { Header, Content, Footer, Sider } = Layout;


class App extends React.Component {
    render() {
        return (
            <Layout>
                <Header className="header">
                    <Menu  onClick={this.handle}
                    >
                        <Menu.Item>tab1</Menu.Item>//menu名称
                        <Menu.Item>tab2</Menu.Item>
                    </Menu>
                </Header>
                <Content>
                    {this.props.children}
                </Content>
            </Layout>
        );
    }



class tab1 extends React.Component {
    render() {
        return (
           <p>tab1</p>
        );
    }
}
class tab2 extends React.Component {
    render() {
        return (
            <p>tab2</p>
        );
    }
}





}

ReactDOM.render(
//Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。
    <Router history={browserHistory}>
//component的会一直渲染，所以可以把tab放在component对应的组件中，如App.class
        <Route path="/" component={App}>


//想象一下当 URL 为 / 时，我们想渲染一个在 App 中的组件。不过在此时，App 的 render 中的 //this.props.children 还是 undefined。这种情况我们可以使用 IndexRoute 来设置一个默认页面。使用IndexRoute后，App 的 render 中的 this.props.children 将会是 <tab1>这个元素。
            <IndexRoute component={tab1}/>
            <Route path="tab1" component={tab1}/>
            <Route path="tab2" component={tab2}/>
        </Route>
    </Router>
    ,document.getElementById('root'));

Route组件还可以嵌套。


<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

上面代码中，用户访问/repos时，会先加载App组件，然后在它的内部再加载Repos组件。所以可以把tab放在component对应的组件中，如App组件。为什么呢？因为app组件所在路由的 path为 “/”，而“/repos”开头包含了 “/”，React就会默认渲染app组件。

Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。

上面代码中，访问根路径/，不会加载任何子组件。也就是说，App组件的this.props.children，这时是undefined。这种情况我们可以使用 IndexRoute 来设置一个默认页面。使用IndexRoute后，App 的 render 中的 this.props.children 将会是 <Dashboard>这个元素。 <IndexRoute component={tab1}/>

到这一步已经实现了：在浏览器输入地址“/tab1”可以跳到对应tab显示的页面。但是“/”路径下的tab1、tab2点击后还是无法跳到正确对应tab显示的页面，需要加个οnclick=""，将各个tab与他的路径匹配起来。

browserHistory.push(path); //跳转到path页面

import React from 'react';
import ReactDOM from 'react-dom';
import {Router , Route , IndexRoute , browserHistory} from 'react-router';
import { Layout, Menu, Breadcrumb, Icon,Table, Input,Button, Popconfirm,Alert,Form } from 'antd';
const { Header, Content, Footer, Sider } = Layout;

//注释掉的不确定需不需要
class App extends React.Component {
     constructor(props){
        super(props);
       /* this.state = {
            currenttab: "1"
        }
        */
    }
    //点击tab后跳转到对应的path页面
    handle= (e) => {
        if(e.key == "1"){
            //跳转到path页面
            browserHistory.push("/tab1" );
        }else{
            browserHistory.push("/tab2" );
        }
       /* this.setState({
            currenttab: e.key
        });
        */

    }

    render() {
        return (
            <Layout>
                <Header className="header">
                    <Menu  onClick={this.handle}
                    //selectedKeys={[this.state.currenttab]}
                    >
                        <Menu.Item key="1">tab1</Menu.Item>
                        <Menu.Item key="2">tab2</Menu.Item>
                    </Menu>
                </Header>
                <Content>
                    {this.props.children}
                </Content>
            </Layout>
        );
    }



class tab1 extends React.Component {
    render() {
        return (
           <p>tab1</p>
        );
    }
}
class tab2 extends React.Component {
    render() {
        return (
            <p>tab2</p>
        );
    }
}



}

ReactDOM.render(
    <Router history={browserHistory}>
//component的会一直渲染，所以可以把tab放在component对应的组件中，如App.class
        <Route path="/" component={App}>


//想象一下当 URL 为 / 时，我们想渲染一个在 App 中的组件。不过在此时，App 的 render 中的 //this.props.children 还是 undefined。这种情况我们可以使用 IndexRoute 来设置一个默认页面。使用IndexRoute后，App 的 render 中的 this.props.children 将会是 <Dashboard>这个元素。
            <IndexRoute component={tab1}/>
            <Route path="tab1" component={tab1}/>
            <Route path="tab2" component={tab2}/>
        </Route>
    </Router>
    ,document.getElementById('root'));

如果希望访问不存在的路径会报，404：

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

function NoMatch({ location }) {
  return (
    <div>
      <h3>
        你访问的地址不存在，404.
      </h3>
    </div>
  );
}

实战

6moji6

发布了61 篇原创文章 · 获赞 4 · 访问量 1万+

私信关注

react(2)-tab、menu路由实战

实战

猜你喜欢