zoukankan      html  css  js  c++  java
  • react-router-dom v5.1.2 版本 实现嵌套路由

    找了好久都没有找到最新版的中文文档 v5.1.2。。。

    入口文件 src/index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import AppRoute from './AppRoute';
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<AppRoute />, document.getElementById('root'));
    
    serviceWorker.unregister();

    路由表 src/AppRoute.js

    import React,{Component} from 'react';
    import {
        HashRouter,
        BrowserRouter as Router,
        Switch,
        Route,
        Link
      } from "react-router-dom";
    import App from './page/App';
    import Test from './page/Test';
    import NotFound from './page/NotFound';
    
    class AppRoute extends Component{
        constructor(props){
            super(props);
            this.state = {};
        }
        render() {
            return <HashRouter>
            <Switch>
                {/* 首页 */}
                <Route path="/" component={()=>(
                    <App>
                        {/* 测试 */}
                        <Route exact path="/test" component={Test}/>
                        {/* 404页面 */}
                        <Route path="*" component={NotFound}/>
                    </App>
                )}>
                </Route>
            </Switch>
        </HashRouter>
        }
    }
    export default AppRoute;

    首页 src/page/App/index.js

    import React,{Component} from 'react';
    import LeftMenu from './components/LeftMenu';
    
    import './index.scss';
    
    class App extends Component{
        constructor(props){
            super(props);
            this.state = {};
        }
        render() {
            return <div className="body">
                <div className="children-container">
                    {this.props.children}
                </div>
            </div>
        }
    }
    
    export default App;

    子页面 Test(名字随意)src/page/Test/index.js

    import React,{Component} from 'react';
    
    import './index.scss';
    
    class Test extends Component{
        constructor(props){
            super(props);
            this.state = {};
        }
        render() {
            return <div className="container">
            测试
            </div>
        }
    }
    
    export default Test;

    使用参考链接的代码,出现了错误,提示router需要传入字符串或函数,修改为本文中的代码即可实现嵌套路由

    参考:在React中使用react-router-dom路由 https://www.jianshu.com/p/8954e9fb0c7e

  • 相关阅读:
    判断整除
    洛谷2018-7月月赛
    luogu_P1177 【模板】快速排序 (快排和找第k大的数)
    lowbit() 运算
    64位整数乘法 (二进制思想)
    poj_1995 Raising Modulo Numbers (快速幂)
    poj_3179 Corral the Cows (二分+二维前缀和+离散化)
    Spring-profile 不同环境配置方法
    Spring-id,name 名称,别名关系
    Leecode no.20 合理的括号
  • 原文地址:https://www.cnblogs.com/xiaqiuchu/p/12462196.html
Copyright © 2011-2022 走看看