react 路由跳转底部tab切换

怼烎@ 2023-06-07 14:25 13阅读 0赞

routers.js文件

import React, { Component } from 'react'
    import { BrowserRouter as Router, Route ,Switch} from 'react-router-dom'
    import Ask from "../pages/ask"
    import Find from "../pages/find"
    import Index from "../pages/index"
    import My from "../pages/my"
    import Others from "../pages/others"
    import Tab1 from "../pages/others/tab1"
    import Tab2 from "../pages/others/tab2"
    export default class index extends Component {
        render() {
            return (
                <div className="colors">
                <Router>
                    <Switch>
                            <Route path="/" exact component={Index}></Route>
                            <Route path="/ask"  component={Ask}></Route>
                            <Route path="/my"  component={My}></Route>
                            <Route path="/others"  component={Others}></Route>
                            <Route path="/find"  component={Find}></Route>
                           
    
                    </Switch>
              </Router>
            {  /*  */}
                    
                    
                </div>
            )
        }
    }

App.js文件

import React from 'react';
    import Routers from "./routers"//引入routers文件
    function App() {
      return (
        <div className="App">
              <div className="content_routers">
                      <Routers></Routers>
              </div>
              
        </div>
      );
    }
    
    export default App;

index.js页面

import React, { Component } from 'react'
    import {  NavLink } from 'react-router-dom'
    export default class index extends Component {
        render() {
            return (
                <div className="indexs">
                    <div className="tops">
                    </div>
                    <ul className="content_li">
                        <li><NavLink exact to="/">首页</NavLink></li>
                        <li><NavLink to="/others">附近</NavLink></li>
                        <li><NavLink to="/find">发现</NavLink></li>
                        <li><NavLink to="/ask">订单</NavLink></li>
                        <li><NavLink to="/my">我的</NavLink></li>
                    </ul>
                </div>
            )
        }
    }

react 路由跳转 底部tab切换