学习react router总结

我是一只在学习前端知识的小白，最近在学习react。
基础不是很好，可能比较笨，真心说一句，react真的不是那么容易理解，呜呜呜~~~
需要学习的知识真的非常多，结合应用的技术也是从零开始学，所以出现一些错误，如果真的有人看的话就请指正！！（抱拳）
话不多说，这次我想要总结一下最近两天学习react router
，react router可以让我们来定义路由，并且设定与之相对应的组件，从而把组件合理的显示出来
首先通过npm，我下载了需要下载的一些文档，如图所示

载入react router
从上图可以看出，我是通过jspm来管理包的（当然npm也是可以的，只要把需要的文件引入就可以），所以通过jspm来下载react router
jspm install react-router[@1.0.0-rcl 可以指定版本]
导入react router
首先创建一个html文件index.html，简单的在其中加入一个div，并引入jspm_packages/system.js、config.js必要文件，除此之外引入一个js文件，来写入你的react组件及路由，并将其显示在页面中。

编辑main_1.js文件

首先引入了一个css样式（不在讨论范围内，忽略它），然后引入了react、reactDOM、react router。其中Router，Route，Link是暂时需要的组件
Router只是一个容器，真正可以定义路由的组件是Route,而Link则是跟a标记差不多的一种组件，用来建立连接，跳转到另一个组件。

之后可以写三个组件，以A组件作为初始，并连接B组件，也许A里的Link可能会看不懂，不着急，向下看

使用ReactDOM.render将路由和组件联系在一起，并且让它们显示在页面中
总结：
1.Router中可以包裹多个Route
2.Route也可以进行嵌套，例如

<Router>
   <Route path="/" component={A}>
    <Route path="/b" component={B}/>
    <Route path="/c" component={C}/>
   </Route>
 </Router>

其A组件中需要加入{this.props.children}，即显示子组件

3.子组件也可以写在Router中的routes属性中

let routes = <Route path="/" component={App}>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
</Route>;

<Router routes={routes} />

4.path为可选属性（可以使用通配符），当没有写该属性的时候那么就会自动加载指定组件。
5.ReactDOM.render一定要写在最后，要不然会加载不上组件
6.链接到跟目录使用

<IndexLink to="/" className="aaa">
 首页
</IndexLink>

在浏览器中打开文件
哎呦喂，，然后你就会发现控制台出现错误

错误点1： 有些教程中并没有写Router的history属性，会出现错误，作为小白的我很难发现，所以要查阅其他大神的教程，或者直接提问（亲测有效），引入并加入属性

import { hashHistory,browserHistory,useRouterHistory} from 'react-router'; 
    ReactDOM.render((
     <Router history={hashHistory}>
      <Route path="/" component={A}>
       <Route path="b" component={B}>
         <Route path="c/:id" component={C} />
       </Route>
      </Route>
     </Router>
    ),document.getElementById("aa"));

显示页面

当其他页面想要进入路由页面的时候，也可以使用history
browserHistory.push('路径');

IndexRoute 组件（无路径）

从页面中我们可以看出，默认为A组件显示当前页，而没有加载B组件的内容，即A组件的this.props.children，这时是undefined。
这时就可以使用IndexRoute 组件来设置默认情况下加载的子组件。

这样，在首页中添加了D组件，在加载页面的时候会显示D组件，这样就可以在D组件中加入A组件的展示内容，有利于代码分离

Redirect 组件和IndexRedirect 组件
当path属性值是以/开头的那么为绝对路径，不以/开头的则为相对路径，即相对于父组件的路径。

以上面的例子为例，要访问C组件，则需要在地址栏输入http://192.168.0.101:8080/#/b...
但是如果加入Redirect 组件那么就可以直接输入http://192.168.0.101:8080/#/c/1
从而达到访问一个路由，自动跳转到另一个路由的目的

import {Router,Route,Link,IndexRoute,Redirect } from 'react-router';
ReactDOM.render((
     <Router history={hashHistory}>
      <Route path="/" component={A}>
      <IndexRoute component={D} />
       <Route path="b" component={B}>
         <Route path="/c/:id" component={C} />
         <Redirect from="c/:id" to="/c/:id" />
       </Route>
      </Route>
     </Router>
    ),document.getElementById("aa"));

IndexRedirect 组件则是用于访问根目录的时候，进行重定向

import {Router,Redirect,IndexRedirect } from 'react-router';
ReactDOM.render((
     <Router history={hashHistory}>
      <Route path="/" component={A}>
      <IndexRoute component={D} />
      <IndexRedirect to="/b" />
       <Route path="b" component={B}>
         <Route path="/c/:id" component={C} />
         <Redirect from="c/:id" to="/c/:id" />
       </Route>
      </Route>
     </Router>
    ),document.getElementById("aa"));

进入与离开路由
我们可以使用 onEnter和onLeave两个属性设置相对应的函数，从而进行通知或者验证

function handleEnter(){
    console.log("进入");
}
function handleLeave(){
    console.log("离开");
}
ReactDOM.render((
     <Router history={hashHistory}>
      <Route path="/" component={A}>
      <IndexRoute component={D} />
      <IndexRedirect to="/b" />
       <Route path="b" component={B}>
         <Route path="/c/:id" component={C} onEnter={handleEnter} onLeave={handleLeave} />
         <Redirect from="c/:id" to="/c/:id" />
       </Route>
      </Route>
     </Router>
    ),document.getElementById("aa"));

以上就是暂时对react router的学习总结

学习react router总结

猜你在找的React相关文章