react-router-dom v5.1.2 版本实现嵌套路由

梁炎 · 發表於 2020-3-11 14:24:00

找了好久都没有找到最新版的中文文档 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

react-router-dom v5.1.2 版本 实现嵌套路由

react-router-dom v5.1.2 版本实现嵌套路由