首页 > 代码库 > react-router

react-router

2024-10-14 15:43:39   215人阅读

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 增加"proxy": "http://localhost:5000",调用的时候去掉域名即可
function fetchgetItems() {
    return dispatch => {
        dispatch(requestPosts(""))
        return fetch(`api/test/get`, getInit)
            .then(response => response.json())
            .then(data =http://www.mamicode.com/> 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}/*"
    }
  }]
}

 文档链接 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md

 



 




 
react-router






























        

            
                
                  
                
                

                    联系

                    我们