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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

找了好久都没有找到最新版的中文文档 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 版本 实现嵌套路由 的全部内容， 来源链接： utcz.com/z/383771.html

回到顶部