反应链接与标签和箭头功能

Posted 2023-02-21

【中文标题】反应链接与标签和箭头功能

【英文标题】：react link vs a tag and arrow function

【发布时间】：2017-08-22 13:22:24

【问题描述】：

我刚开始使用 react 路由器。

我有两个问题。使用<Link to="/page"> 和<a href="page"> 有什么区别？两者都向/page 发出完全相同的获取请求，但是当我使用<a href="page"> 时出现错误，但是当我在嵌套路由时使用<Link to="/page"> 时它可以工作。我不明白，当我知道两者都呈现到完全相同的 url 时，怎么可能有任何区别？

第二个是 react router v4 文档中奇怪的箭头函数

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

我知道() => 这些是 ES6 中的新功能，但我在普通括号中找不到任何东西，而不是括号。它们是什么？

编辑

我的 index.js 类（我有所有的导入）

render((
    <Router>
        <div>
            <Route component=App/>
        </div>
    </Router>
), document.getElementById('root')
);

我的 App.js 类

class App extends Component 
render() 
    return (
        <div className="container">
            <header>
                <span className="icn-logo"><i className="material-icons">code</i></span>
                <ul className="main-nav">
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/teachers">Teachers</Link></li>
                    <li><Link to="/courses">Courses</Link></li>
                </ul>
            </header>
            <Route exact path="/" component=Home/>
            <Route path="/about" component=About/>
            <Route path="/teachers" component=Teachers/>
            <Route path="/courses" component=Course/>
        </div>
    );



export default App;

我得到的错误。 当我尝试移动到localhost:8080/about 时，浏览器上的Cannot GET /about。但是，当我单击 about 按钮时，它会转到完全相同的 url /about 并完美呈现

【问题讨论】：

我很困惑，因为() 是括号......所以你知道大括号，你知道return 何时隐含在箭头函数中，何时隐含如果您需要返回一个值，则需要？你还知道什么时候在箭头函数中使用() => ();？哦，基本上，该函数只返回<div> <h2>About</h2> </div>

@JaromandaX 抱歉，我把词汇弄混了。但是，是的，这就是我想要的。谢谢

【参考方案1】：

现在解决您的问题可能有点晚了，您可能已经想通了。但这是我的看法：

第一：

使用<Link to="/page">和<a href="page">有什么区别

从表面上看，您似乎在这里比较苹果和橙子。锚标记中的路径是相对路径，而 Link 中的路径是绝对路径（没错，我认为 react-router 还不支持相对路径）。这造成的问题是说你在/blah，而单击你的Link 将转到/page，单击<a href='page' /> 将转到/blah/page。这可能不是问题，因为您确认了 url 的正确性，但请注意。 更深层次的区别是@Dennis 答案（以及他指出的文档）的附加内容，即您已经处于与Link 指向的路径相匹配的路径中。假设我们目前在/page 上，而Link 指向/page 甚至/page/:id，这不会触发整页刷新，而<a /> 标签自然会触发。请参阅问题on Github。

我用来解决我的小需求的解决方法是将state 属性传递到链接中，例如<Link to=pathname: "/page", state: "desiredState">Page</Link>。然后我可以在目标组件的（比如<Page />）componentWillReceiveProps 中检查这一点，如下所示：

componentWillReceiveProps(nextProps)
  if (nextProps.location.state === 'desiredState') 
    // do stuffs
  

第二个问题：

react router v4 文档中奇怪的箭头函数...我在普通括号中找不到任何东西，而不是括号。它们是什么？

箭头函数； @Dennis 和 @Jaromanda X 再次解决了这个问题。不过，我要补充三点：

如果() => blah 没有大括号，则在这种情况下blah 会隐式返回=> 后面的任何内容。但是，当您在箭头之后立即使用花括号时，如果您愿意，现在您有责任return 一些东西。所以() => blah（顺便说一下是() => (blah)的同义词）将更类似于() => return blah 而不是() => blah 。 那么如果你想返回一个对象会发生什么： blah: blah ;这就是@Jaromanda X 所指的。然后，您需要执行 () => ( blah: blah ) 或简单地 () => ( blah ) 进行隐式返回，或者您可以像 () => return blah: blah 那样显式返回。 我的第三点是给你指点MDN

希望对你有帮助。

【讨论】：

就我而言，我面临同样的问题，即 react-router 确实更改了 URL 但没有更改页面内容。在我也尝试了您的解决方案之后，它不起作用。有什么建议吗？

@amrs-tech 在没有看到您对路线做了什么的情况下提出建议是很乏味的。但是，您可以尝试从使用 react-router render 切换到使用 component 道具。也就是说，如果您正在使用<Route render=() => <YourComponent /> />，请尝试使用<Route component=YourComponent />。 ¯_(ツ)_/¯ 祝你好运！

在反应钩子中，我遇到了<Link href=""> 的问题。该页面无法完全加载，但使用<a href=""> 可以。

【参考方案2】：

href 属性会触发页面刷新，从而重置应用程序状态。但是 react-router 的链接和导航链接不会触发页面刷新。由于 React 大部分时间用于创建单页应用程序，因此请确保在使用路由时选择 Link 或 Navlink

【参考方案3】：

该组件允许您做比普通链接元素更多的事情。例如，因为它是一个 React 组件，所以你有拥有状态和没有状态的好处（如果你想要的话）。您可以在 here 上查看更多文档。如果没有错误，我不确定会发生什么，但我怀疑路由库希望您使用该组件，而不是普通的 html 元素。

关于() => ，这是一个称为匿名函数或lambda 表达式的构造。这与将函数保存在变量中基本相同：var x = function() return (<div>...) ; 如果您在第一个括号中有任何内容，则它是您可以访问的参数：const x = (y) => return y*2; 在 React 中这样做的原因是将函数范围暴露给它所在的组件。

【讨论】：

您好，我已编辑以显示错误和我的课程。你认为你知道问题是什么吗？

@serendipity 只要你不使用任何其他时髦的业务，我不完全确定。 Link 将 URI 更改为 /something，然后您的 应该接受它并呈现任何 是。你说它与 一起工作，这是否意味着呈现了正确的组件？您可以尝试将您的代码与这个有效的代码进行比较。 fiddle.jshell.net/terda12/mana88Lm

据我所知，在 React Route v4 和 v4 中不推荐使用 routehandler，似乎我们必须将路由直接放在子类本身中。我指的是这个页面reacttraining.com/react-router/web/example/basic

【参考方案4】：

没有比看代码更好的了。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js

您可以看到Link 是一个组件，它在内部使用history。哪个是 react-router 的历史和导航背后的模块||库。并提供不同的模式（内存历史、浏览器历史、哈希历史。甚至自定义）。

是的，作为相似性，它呈现一个锚标记，但默认行为被覆盖（preventDefault()）。他们本可以只使用一个 div。但并不完全正确。至于原因如下。

所以基本上它是这样工作的：

观察以下情况

  if (
          !event.defaultPrevented && // onClick prevented default
          event.button === 0 && // ignore everything but left clicks
          (!this.props.target || this.props.target === "_self") && // let browser handle "target=_blank" etc.
          !isModifiedEvent(event) // ignore clicks with modifier keys
    ) 

如果满足上述条件。它将使用 history（推送或替换）。否则它将离开浏览器的正常行为。所以在这种情况下，它只是一个普通的锚标签<a />。让浏览器处理 target='blank' 的示例。条件很好解释。 然后取决于历史对象的类型。行为改变。不是`本身的行为。但只是历史对象类型的结果。

在简历中：

<Link /> 是一个组件，它呈现一个<a /> 锚标记。然而，在主要条件下，默认行为被阻止 (preventDefault())。这允许它将更改应用于历史对象（onClick 事件）。 react-router 导航基于哪个。并且在上面提到的一些条件下。它只是回退到浏览器行为。并且只是一个 <a /> 锚标签（不是 preventDefault()）。

为了使用。如果您使用的是 React-router。然后你只需要使用Link。