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

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

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

找了好久都没有找到最新版的中文文档 v5.1.2。。。
入口文件 src/index.js
<div class="cnblogs_code">
<pre>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();</pre>
</div>
路由表 src/AppRoute.js
<div class="cnblogs_code">
<pre>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;</pre>
</div>
首页 src/page/App/index.js
<div class="cnblogs_code">
<pre>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;</pre>
</div>
子页面 Test（名字随意）src/page/Test/index.js
<div class="cnblogs_code">
<pre>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;</pre>
</div>
使用参考链接的代码，出现了错误，提示router需要传入字符串或函数，修改为本文中的代码即可实现嵌套路由 
参考：在React中使用react-router-dom路由 https://www.jianshu.com/p/8954e9fb0c7e

</div>
<div id="MySignature" role="contentinfo">

<div>
博主：夏秋初 
地址：https://www.cnblogs.com/xiaqiuchu/p/12462196.html 

如果对你有帮助，可以点一下
{$('#green_channel_follow').click()})() "> 推荐 
或者
{$('#div_digg .diggit').click()})() "> 关注 
吗？会让我的分享变得更有动力~ 
转载时请带上原文链接，谢谢。 

</div> 
来源：https://www.cnblogs.com/xiaqiuchu/p/12462196.html

頁: [1]

琼殿技术论坛's Archiver

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

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