まず、モジュラー経路(経路辞書によって定義され、そしてその後、アウト回転)
1.公式文書リファレンス
[公式文書] https://reacttraining.com/react-router/web/guides/quick-start
[インスタンス]ルーティングモジュラーhttps://reacttraining.com/react-router/web/example/route-config
2.モジュラールーティング:実装コード
他のコード・リファレンス:17:HTTPS://blog.csdn.net/u010132177/article/details/103323644
内容:[1]、[2]で
App.js
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route,Link } from 'react-router-dom'; //引入路由模块
import Home from './components/home';
import User from './components/user';
//【1】定义一个数组,里面存放route的字典
let routes=[
{
path:'/',
exact:true,
component:Home
},
{
path:'/user/',
component:User
}
]
function App() {
return (
<Router>
<div>
<header className='header'>
<Link to='/'>首页</Link>
<Link to='user'>个人中心</Link>
</header>
{/* 【2】循环出来刚定义的数组内字典——模块块完成。注意此处的routes直接.map即可,不要加this了因为它就定义在页面上 */}
{
routes.map((v,k)=>{
if(v.exact){
return <Route exact path={v.path} component={v.component} />
}else{
return <Route path={v.path} component={v.component} />
}
})
}
</div>
</Router>
);
}
export default App;
3.モジュラールーティング:また、単一のファイルにルーティング
/src/model/routes.js:最初のステップは、第1の経路定義を描画する必要があります
import Home from '../components/home';
import User from '../components/user';
//【1】定义一个数组,里面存放route的字典
let routes=[
{
path:'/',
exact:true,
component:Home
},
{
path:'/user/',
component:User
}
]
export default routes;
/src/App.jsにroutes.jsを導入する第二工程、
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route,Link } from 'react-router-dom'; //引入路由模块
import routes from './model/routes.js';
function App() {
return (
<Router>
<div>
<header className='header'>
<Link to='/'>首页</Link>
<Link to='user'>个人中心</Link>
</header>
{/* 【2】循环出来刚定义的数组内字典——模块块完成。注意此处的routes直接.map即可,不要加this了因为它就定义在页面上 */}
{
routes.map((v,k)=>{
if(v.exact){
return <Route exact path={v.path} component={v.component} />
}else{
return <Route path={v.path} component={v.component} />
}
})
}
</div>
</Router>
);
}
export default App;
同上効果
二つのネストされたコンポーネントは、ルートサンズ値を渡します
機能:ルーティングのルートコンポーネントは、ユーザーがファイルとして、その内部ルーティング根コンポーネント、サブアセンブリを含んで別/model/router.js上のコンポーネントをスワップアウトし、User.js.のルーティングルーティング ここに入るように設定されているコンポーネントをルーティングした後の設定は関係ありません。
SRC / App.js
import React from 'react';
import './assets/css/index.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
import routes from './model/router.js';
function App() {
return (
<Router>
<div>
<header className="title">
<Link to="/">首页组件</Link>
<Link to="/user">用户页面</Link>
<Link to="/shop">商户</Link>
<Link to="/news">新闻</Link>
</header>
{
routes.map((route,key)=>{
if(route.exact){
return <Route key={key} exact path={route.path}
// route.component value.component <User {...props} routes={route.routes} />
render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} routes={route.routes} />
)}
/>
}else{
return <Route key={key} path={route.path}
render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} routes={route.routes} />
)}
/>
}
})
}
</div>
</Router>
);
}
export default App;
SRC /モデル/ router.js
import Home from '../components/Home';
import User from '../components/User';
import UserList from '../components/User/UserList';
import UserAdd from '../components/User/UserAdd';
import UserEdit from '../components/User/UserEdit';
import Shop from '../components/Shop';
import News from '../components/News';
let routes = [
{
path: "/",
component: Home,
exact:true
},
{
path: "/shop",
component: Shop
},
{
path: "/user",
component: User,
routes:[ /*嵌套路由*/
{
path: "/user/",
component: UserList
},
{
path: "/user/add",
component: UserAdd
},
{
path: "/user/edit",
component: UserEdit
}
]
},
{
path: "/news",
component: News
}
];
export default routes;
SRC /資産/ CSS / index.css
@charset "UTF-8";
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0; }
.title{
height: 44px;
line-height:44px;
background: #000;
}
.title a{
color:#fff;
padding:0 20px;
}
/*左右分栏*/
.content{
width:100%;
height: 500px;
display:flex;
}
.content .left{
width:200px;
height: 500px;
background: #eeee;
}
.content .right{
flex:1;
height: 500px;
border:1px solid #000;
}
SRC /コンポーネント/ Home.js、News.js、Shop.js、user.jsの
フォーカスuser.jsの、他の人は同じです
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class User extends Component {
constructor(props) {
super(props);
this.state = {
msg:'我是一个User组件'
};
}
componentWillMount(){
console.log(this.props.routes);
}
render() {
return (
<div className="user">
<div className="content">
<div className="left">
<Link to="/user/">用户列表</Link>
<br />
<br />
<Link to="/user/add">增加用户</Link>
<br />
<br />
<Link to="/user/edit">编辑用户</Link>
</div>
<div className="right">
{
this.props.routes.map((route,key)=>{
return <Route key={key} exact path={route.path} component={route.component} />
})
}
{/* <Route path="/user/add" component={UserAdd} /> */}
</div>
</div>
</div>
);
}
}
export default User;
/src/components/User/UserAdd.js,UserEdit.js,UserList.js
内容はテキスト以外は同じです
import React, { Component } from 'react';
class UserAdd extends Component {
constructor(props) {
super(props);
this.state = {
msg:'我是一个User组件'
};
}
render() {
return (
<div className="user">
用户组件UserAdd
</div>
);
}
}
export default UserAdd;