ant design 后台模板 -2. 学习 react-router

引入 react-router

npm install react-router-dom

​

目前 react-router 已经到了 4.0,从官方文档看到，现在引入的是 react-router-dom,对于英文尚需努力的同学来说，也不必担心，因为已经有大神做好了中文版

初始化根路由

修改 index.js

import React from 'react';
import ReactDOM from 'react-dom';

import {
  BrowserRouter as Router,
  Route,
  browserHistory ,
  Switch
} from 'react-router-dom'
import App from './App';
import './index.css';

ReactDOM.render(
    <Router history={browserHistory }>
        <Switch>
            <Route exact path="/" component={App}></Route>
        </Switch>
    </Router>,
  document.getElementById('root')
);


​

此时使用 npm start 启动，就能看到展示的是 App 的效果，接下来，我们根据官方文档学习。

基本使用

1.在 src 下创建 basic 文件夹,然后再 basic 下创建 Home.js、About.js、BasicExample.js，然后完善其中的代码

• Home.js

  import React from 'react';
  class Home extends React.Component{

	  render(){
		  return (
			  <div>Home</div>
		  );
	  }
  }
  export default Home;

​

• About.js

  import React from 'react';
  class About extends React.Component{

	  render(){
		  return (
			  <div>About</div>
		  );
	  }
  }
  export default About;

​

• BasicExample.js

import React from 'react';
import Home from './Home';
import About from './About';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

class BasicExample extends React.Component{

    render(){
        return (
            <Router>
            <div>
              <ul>
                <li><Link to="/home">首页</Link></li>
                <li><Link to="/about">关于</Link></li>
              </ul>

              <hr/>

              <Route path="/home" component={Home}/>
              <Route path="/about" component={About}/>
            </div>
          </Router>
        );
    }
}

export default BasicExample;
​

• 修改 App.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  browserHistory ,
  Link
} from 'react-router-dom';
import BasicExample from './basic/BasicExample';

class App extends Component {

    render() {
        return (
            <Router>
            <div>
              <ul>
                <li><Link to="/baiscExample">基本使用</Link></li>
              </ul>

              <hr/>

              <Route path="/baiscExample" component={BasicExample}/>
            </div>
          </Router>
        );
    }
}

export default App;


​

运行查看效果：