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
 

這樣將路由單獨分離出去，實現真正的路由模組化