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

Question

我刚开始使用 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 并完美呈现

Answer 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

希望对你有帮助。

Answer 2

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

Answer 3

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

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

Answer 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。