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