标签：ges space 链接 域名 lin span dia over 开发
react-router 是第三方库用来构建react应用的路由。
示例代码如下
import React from ‘react‘ import { BrowserRouter as Router, Route, Link } from ‘react-router-dom‘ ///paras const ParamsExample = () => ( <Router> <div> <h2>Accounts</h2> <ul> <li><Link to="/netflix">Netflix</Link></li> <li><Link to="/zillow-group">Zillow Group</Link></li> <li><Link to="/yahoo">Yahoo</Link></li> <li><Link to="/modus-create">Modus Create</Link></li> </ul> <Route path="/:name" component={Child}/> <Route path="/:id" component={Child1}/> </div> </Router> ) const Child = ({ match }) => ( <div> <h3>Name: {match.params.name}</h3> </div> ) const Child1 = ({ match }) => ( <div> <h3>ID: {match.params.id}</h3> </div> ) export default ParamsExample
Link :提供可访问的导航。
1.to:string
<Link to="/about">About</Link>
to:object
2.<Link to={{
pathname: ‘/courses‘,
search: ‘?sort=name‘,
hash: ‘#the-hash‘,
state: { fromDashboard: true }
}}/>
Route:当路由匹配时呈现对应的UI
有以下三种使用方式，最常用的是使用 component
<Route component>
<Route render>
<Route children>
以上是一个简单的示例和用法。https://reacttraining.com/react-router/web/api/Router
顺便分享一下工作中遇到的问题。
1.用 create-react-app创建react项目 用fetch 调用本地服务器api时出现跨域问题，在header中增加no-cros返回报错异常数据流。
其实文档中有一个
巧妙的解决办法 利用代理。在package.json 增加function fetchgetItems() {
return dispatch => {
dispatch(requestPosts(""))
return fetch(`api/test/get`, getInit)
.then(response => response.json())
.then(data => dispatch(receivePost(data)))
}
}
2. 如果使用vscode开发 可以调试js。
在launch.json增加以下代码，安装 Chrome Debugger Extension插件。npm start启动项目，然后f5启动即可，然后可以加断点进行调试。
{
"version": "0.2.0",
"configurations": [{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}]
}
标签：ges space 链接 域名 lin span dia over 开发
原文地址：http://www.cnblogs.com/yxcoding/p/7100629.html
