react-router v4+使用

1、安裝react-router-dom

cnpm intall --save-dev react-router-dom
           

2、app.js

import React, { Component } from 'react';
class App extends Component {
  render () {
    return (
      <div>
        app.jsx
        {this.props.children }
      </div>
    )
  }
}
export default App;
           

3、頁面

import React, { Component } from 'react';
import { Route } from 'react-router-dom'

class Index extends Component {
    constructor (props) {
        super(props)
    }
    render () {
        return (
            <div>
                <hr />
                Index
            </div>
        )
    }
}
// 不再單獨的抛出元件，而是抛出路由
let routerHandler = () => {
	return <Route exact path='/' component={Index}/>
}
export default routerHandler
           

4、建立檔案夾 router/index.jsx

import React from 'react'
import { HashRouter as Router } from 'react-router-dom'
//import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Index from '../component/Index'
import List from '../component/List'
import App from '../App'
console.log(Index)
// 1.越詳細的路由越靠前，權限越大越靠後
// 2.給權限大的路由去加一個exact屬性
export default () => {
	return (
		<Router>
			<App>
				{/* <Switch>
				    <Route exact path="/" component={Index} />
                </Switch> */}
                <Index />
                <List />
			</App>
		</Router>
    )
}
           

5、index.js 引入Router

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Router from './router/index'
import * as serviceWorker from './serviceWorker';
ReactDOM.render((
    <Router />
), document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();