在React中使用react-router-dom路由

在React中使用react-router-dom路由

使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom

安装

首先使用npm安装react-rouyer-dom

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

安装以后写两个页面用于跳转

import React from 'react';


export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a>去detail</a>
            </div>
        )
    }
}

import React from 'react';


export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a>回到home</a>
            </div>
        )
    }
}

然后在src下建立一个路由组件，命名为Router.js

import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from '../home';
import Detail from '../detail';


const BasicRoute = () => (
    <HashRouter>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/detail" component={Detail}/>
        </Switch>
    </HashRouter>
);


export default BasicRoute;

将两个页面组件Home和Detail使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载响应的页面

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';

ReactDOM.render(
  <Router/>,
  document.getElementById('root')
);

大概写到这里路由就可以开始工作了但是需要在页面上加入跳转条件这个就要靠你自己了哦

BrowserRouter HashRouter

HashRouter是前端路由
BrowserRouter是后端路由

• browserHistory和hashHistory的区别？
  更改路由的方式不同

  1.browserHistory 使用的是 HTML5 的 pushState API来修改浏览器的历史记录

  2.hashHistory 是通过改变地址后面的 hash（也就是URL中#后面的值） 来改变浏览器的历史记录。

Route

Route组件的Props对象中包含有path和component两个属性。根据当前URL和path属性的比对，Route组件配合其他的Route组件将包裹的子组件映射成完整的组件树

嵌套路由

如果我们想要在新闻下面分时政要闻和娱乐新闻，就需要在News.js组件下面进行路由配置

1. 新建NewsOne.js和NewsTwo.js两个组件，和上面两个组件一样，只添加最基本的内容就可以了。

2. 对News.js进行重新布局，左边放嵌套路由，右边展示内容切换。
   

3. 在News.js中引入路由组件，并配置路由
   
   好今天暂时给大家总结到这里谢谢大家 再会！！！！！