React Routing

Router Router 是放置 Route 的容器，其本身不定义 routing ，真正 routing 规则由 Route 定义。
Route Route 负责 URL 和对应的组件关系，可以有多个 Route 规则也可以有嵌套（nested）Routing。像下面的例子就是每个页面都会先载入 App 组件再载入对应 URL 的组件
history Router 中有一个属性 history 的规则，这边使用我们使用 hashHistory，使用 routing 将由 hash（#）变化决定。例如：当使用者拜访 http://www.github.com/，实际看到的会是 http://www.github.com/#/。下列范例若是拜访了 /about 则会看到 http://localhost:8008/#/about 并载入 App 组件再载入 About 组件。

hashHistory 会通过 hash 进行对应。好处是简单易用，不用多余设定。
browserHistory 适用于伺服器端渲染，但需要设定伺服器端避免处理错误，这部份我们会在后面的章节详细说明。注意的是若是使用 Webpack 开发用伺服器需加上 –history-api-fallback
$ webpack-dev-server --inline --content-base . --history-api-fallback
createMemoryHistory 主要用于伺服器渲染，使用上会建立一个存在记忆体的 history 物件，不会修改浏览器的网址位置。
const history = createMemoryHistory(location)

path path 是对应 URL 的规则。例如：/repos/torvalds 会对应到 /repos/:name 的位置，并将参数传入 Repos 组件中。由 this.props.params.name 取得参数。顺带一提，若为查询参数 /user?q=torvalds 则由 this.props.location.query.q 取得参数。

//常用书写方法
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
import App from './components/App';
import Home from './components/Home';
import Repos from './components/Repos';
import About from './components/About';
import User from './components/User';
import Contacts from './components/Contacts';ReactDOM.render(<Router history={hashHistory}><Route path="/" component={App}><IndexRoute component={Home} /><Route path="/repos/:name" component={Repos} /><Route path="/about" component={About} /><Route path="/user" component={User} /><Route path="/contacts" component={Contacts} /></Route></Router>,document.getElementById('app')
);
//另一种书写方法
const routes = (<Route path="/" component={App}><IndexRoute component={Home} /><Route path="/repos/:name" component={Repos} /><Route path="/about" component={About} /><Route path="/user" component={User} /><Route path="/contacts" component={Contacts} /></Route>
);ReactDOM.render(<Router routes={routes} history={hashHistory} />,document.getElementById('app')
);

React Routing相关推荐

React学习途径和资料分享
转自: https://www.jianshu.com/p/de421e0db710 这段时间因为项目的原因,要做web前端,趁此机会调研了一下当前前端的技术,根据调研的结果,React毫无疑问是现 ...
关于React Router v4的虚张声势指南
In this article, we'll cover the important things you can quickly learn to be informed and confident ...
如何使create-react-app与Node Back-end API一起使用
This is a very common question among newer React developers, and one question I had when I was start ...
qiankun 2.x 运行时沙箱源码分析
当学习成为了习惯,知识也就变成了常识.感谢各位的点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github,欢迎 Watch 和 Star. 简介 ...
如何实现一个sandbox？
qiankun 中沙箱的实现比较复杂,本章讲解 ProxySandbox 的实现方式. createSandbox 是在 loadApp 的时候执行的.返回值中包含 mount 和 unmount 两 ...
如何使用Angular Router在Angular 9应用程序中创建导航
This article will demonstrate the proper way to create page navigation leveraging routing features p ...
react中使用构建缓存_通过构建海滩度假胜地网站，了解如何使用React，Contentful和Netlify...
react中使用构建缓存 In this full course from John Smilga you will learn React by building a beach resort we ...
如何使用React.js和Heroku快速实现从想法到URL的转变
by Tom Schweers 由汤姆·史威士(Tom Schweers) 如何使用React.js和Heroku快速实现从想法到URL的转变 (How to go from idea to URL ...
angular react_Angular 2 vs React：将会有鲜血
angular react Angular 2 has reached Beta and appears poised to become the hot new framework of 2016. ...

React Routing

React Routing

React Routing相关推荐

最新文章

热门文章