App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css';
import routes from './model/routes'
class App extends Component {
render () {
return (
<Router>
<div className="App">
<img src={logo} className="App-logo" alt="logo" width='100px' />
<header className="title">
<Link to="/">首页组件</Link>
<Link to="/user">用户页面</Link>
<Link to="/shop">商户</Link>
<Link to="/news">新闻</Link>
</header>
{/* <Route exact path='/' component={Home}/>
<Route path='/user' component={User}/>
<Route path='/shop' component={Shop}/>
<Route path='/news' component={News}/> */}
{/* <Route exact path='/user/' render={props=>(
<route.component {...props} routes={route.routes} />
)}/> */}
{
routes.map((value, key) => {
if (value.exact) {
// 向子组件传值
return <Route key={key} exact path={value.path}
render={props => (
<value.component {...props} routes={value.routes} />
)} />
} else {
// 向子组件传值
return <Route key={key} path={value.path}
render={props => (
<value.component {...props} routes={value.routes} />
)} />
}
})
}
</div>
</Router>
);
}
}
export default App;
User.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// import UserList from './User/UserList.js'
// import UserAdd from './User/UserAdd.js'
class User extends Component {
constructor(props) {
super(props);
this.state = {
msg: '我是一个User组件'
};
}
componentWillMount () {
console.log(this.props.routes)
}
render () {
return (
<Router>
<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">
{/* <Route exact path='/user' component={UserList} />
<Route exact path='/user/add' component={UserAdd} /> */}
{
this.props.routes.map((value, key) => {
return <Route key={key} exact path={value.path} component={value.component} />
})
}
{/* <Route path="/user/add" component={UserAdd} /> */}
</div>
</div>
</div>
</Router>
);
}
}
export default User;
routes.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: '/user',
component: User,
routes: [ /*嵌套路由*/
{
path: "/user/",
component: UserList
},
{
path: "/user/add",
component: UserAdd
},
{
path: "/user/edit",
component: UserEdit
}
]
},
{ path: '/shop', component: Shop },
{ path: '/news', component: News }
]
export default routes
在配置路由时,只需建立如UserEdit.js组件,在routes.js配置路由,在User.js中配置Link,即可;
附加:UserEdit.js
import React, { Component } from 'react';
class UserEdit extends Component {
constructor(props) {
super(props);
this.state = {
msg:'我是一个UserEdit组件'
};
}
render() {
return (
<div className="user">
用户组件UserEdit
</div>
);
}
}
export default UserEdit;