react路由

最近在学习react，研究了react的路由配置。说到react路由我们首先看一下react-router和react-router-dom的区别：

1、react-router：提供了router的核心api。如Router、Route、Switch等，但是没有提供有关DOM操作进行路由跳转的api。
2、react-router-dom: 提供了BrowserRouter、Route、Link等api，可以通过DOM操作出发时间控制路由。
3、react-router-dom中包含了react-router的依赖，因此只需要安装react-router-dom即可。

配置路由

1、下载安装 react-router-dom

npm install react-router-dom --save

2、建一个组件message.js

import React, { Component } from 'react';
export default class message extends Component {
  render() {
    return (<h1>
      欢迎，这里是Message
    </h1>)
  }
}

3、新建一个router.js文件，放哪儿都可以，将有路由的页面引入进来

//引入react jsx写法的必须
import React from 'react'; 
//引入需要用到的页面组件 
import message from './message';
//引入一些模块
import { BrowserRouter as Router, Route} from "react-router-dom";

class router extends React.Component{
  render() {
   return (
     <Router>
       <Route path="/message" component={message} />
     </Router>
   );
}

export default router;

4、在App.js中引入这个router.js文件

import React, {Component} from 'react';
import Router from './router'

class App extends Component {
  render() {
    return (
      <Router />
    )
  }
}
export default App;

嵌套路由

当页面需要局部切换时就会用到嵌套路由
1、在需要嵌套路由的地方加上{this.props.children}

//message.js
import React, { Component } from 'react';
export default class message extends Component {
  render() {
    return (<h1>
      欢迎，这里是Message
      {this.props.children} // 嵌套路由展示的地方
    </h1>)
  }
}

2、新建一个嵌套文件Board.js

import React, { Component } from 'react';
export default class message extends Component {
  render() {
    return (<h1>
      欢迎，这里是Board
    </h1>)
  }
}

3、修改router.js

//引入react jsx写法的必须
import React from 'react'; 
//引入需要用到的页面组件 
import message from './message';
//引入一些模块
import { BrowserRouter as Router, Route} from "react-router-dom";
import Board from './Board';

class router extends React.Component{
  render() {
    return (
      <Router>
        <Route path="/message" render={()=>(
          <Message>
            <Route path='/message/Board' component={Board}></Route>
          </Message>)
        }></Route>
      </Router>
    )
  }  
};
export default router;