routes数组配置动态路由表
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from './components/Home';
import User from './components/User';
import Shop from './components/Shop';
import News from './components/News';
import './assets/css/index.css';
let routes = [
{ path: '/', component: Home, exact: true },
{ path: '/user', component: User },
{ path: '/shop', component: Shop },
{ path: '/news', component: News }
]
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}/> */}
{
routes.map((value, key) => {
if (value.exact) {
return <Route key={key} exact path={value.path} component={value.component} />
} else {
return <Route key={key} path={value.path} component={value.component} />
}
})
}
</div>
</Router>
);
}
}
export default App;
上述版本是路由未分离,下面将routes分离出去,放入model中
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}/> */}
{
routes.map((value, key) => {
if (value.exact) {
return <Route key={key} exact path={value.path} component={value.component} />
} else {
return <Route key={key} path={value.path} component={value.component} />
}
})
}
</div>
</Router>
);
}
}
export default App;
routes.js
import Home from '../components/Home';
import User from '../components/User';
import Shop from '../components/Shop';
import News from '../components/News';
let routes = [
{ path: '/', component: Home, exact: true },
{ path: '/user', component: User },
{ path: '/shop', component: Shop },
{ path: '/news', component: News }
]
export default routes
这样将路由单独分离出去,实现真正的路由模块化