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

  • 相关阅读:
    Akka-CQRS(4)- CQRS Writer Actor 示范
    Akka-CQRS(3)- 再想多点,全面点
    变量、作用域
    JSON概述
    js浮点精度问题
    自定义级联下拉框
    nodejs+express+mysql 增删改查(二)
    使用Navicat Premium 链接本地数据库的方法(二)
    行内编辑时间框
    thinkjs升级到3.0后的图片上传
  • 原文地址:https://www.cnblogs.com/xiaqiuchu/p/12462196.html
Copyright © 2011-2022 走看看