HashRouter、BrowserRouter、Route、Link、HashRouter和BrowserRouter的区别；

 

1.安装react-router-dom

   1.1  在项目命令行中，执行
npm install react-router-dom-S
下载到生产环境依赖中。

2.路由内置组件

HashRouter  
表示一个路由的跟容器，将来所有跟路由相关的东西，都要包裹在HashRouter中，一个网站中，只需要使用一次HashRouter就好了。

Link
表示一个路由的连接；

Route
表示一个路由规则；

 1 render(){
 2         return (
 3             
 4                 

 5                     
这是网站的根目录
 6                     

 7                     "/new">首页  
 8                     "/movie/">新闻  
 9                     "/about">关于我们
10                     

11                     "/home" component={HOME} >

12                     "/new" component={New} exact>

13                     "/about" component={About}>

14                 
15             
16         );
17     }

 

由Route创建的标签，就是路由规则，其中path表示要匹配的路由，component表示要展示的组件。
Route具有两种身份：
1.它是一个路由匹配规则；
2.它是一个占位符，表示将来匹配到的组件都放到这个位置
注意：

Link to属性的地址也是/开头，Link在页面渲染的是a标签；
Route 组件path地址是以/开头 ，配置component属性，是显示的组件，这个属性不可以大写；

3.嵌套路由

嵌套路由：在路由组件中，使用Link，Route，配置子路由，实现跳转，切换；
下面为一级路由，在一级路由New为路由组件

 1 "/new" component={ New }>
 2 
 3  render (){
 4        return(
 5            
 6           《新闻》
 7           

 8               

 9                   "/new/act">今日聚焦
10               
11               

12                   "/new/three">三农信息
13               
14               

15                   "/new/week">新闻周刊
16               
17           
18           "/new/act" component={Act}>
19           "/new/three" component={Three}>
20           "/new/week" component={Week}>
21           
22            
23        )
24     }

 

4.带参数路由和获取参数

通过配置路由的地址，在Link跳转时

    Route path路径后面 /:id （key）
    Link to 路径后面 /top/10 （value）
  接收传值：
     class类组件，this.props.match.params.属性名
         函数组件：形参.match.params.属性名
   代码实例：

 1 render(){
 2         return (
 3             
 4                 

 5                     
网站根目录
 6                     

 7                     "/about/add/5497">关于我们  
 8                     

 9                     "/about/:type/:id" component={Movie} exact>
10                 
11             
12         );
13     }

 

在Route内置组件中，配置path地址

 1 "/about/:type/:id" component={Movie}>
 2 
 3 //在Link内置组件中，配置to属性，进行跳转：
 4 
 5 "/about/active/5497">
 6 
 7 //类组件中通过声明周期进行接收this.props传递过来的数据
 8 
 9 render(){
10 console.log(this);
11 return (
12 

13 电影--{this.props.match.params.type}--{this.props.match.params.id}
14 
15 );
16 }

5.  HashRouter和BrowserRouter的区别

React-Router 是建立在 history 之上的，常见的history路由方案有三种形式，分别是：

• hashHistory
  • hashHistory 使用 URL 中的 hash（#）部分去创建路由，举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/。
• browserHistory
  • browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/list/123这样真实的 URL
  • 当刷新页面时，浏览器会向服务器请求，服务器实际会去找根目录下对应的文件，发现找不到，因为实际上我们的服务器并没有这样的 物理路径/文件 或没有配置处理这个路由，所有内容都是通过React-Router去渲染React组件，自然会报404错误。
• createMemoryHistory
  • Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境（像 React Native ）。和另外两种history的一点不同是你必须创建它，这种方式便于测试。

两种解决方法

• 使用hashHistory，不用做额外处理
• 使用browserHistory，服务器需要进行相关路由配置
  方法见这里