反应链接与标签和箭头功能 [英] react link vs a tag and arrow function

问题描述

大家好我是初学者程序员刚开始使用路由器。

Hi guys I'm a beginner programmer just started on react router.

我有两个问题。使用< Link to =/ page> 和< a href =page> ？两者都对 / page 提出完全相同的get请求，但是当我使用< a href =page> 但是当我在嵌套路线时使用< Link to =/ page> 时，它可以正常工作。我不明白当我知道两个渲染到完全相同的URL时会有什么不同

I have two questions. What is the difference between using <Link to="/page"> and <a href="page">? Both make the exact same get request to /page but I get an error when I use <a href="page"> but it works when I use <Link to="/page"> when I am nesting routes. I don't understand how there could be any difference when I know for fact that both render to exact same url

其次是反应路由器v4文档中的奇怪箭头函数

Second is the weird arrow function in react router v4 documentation

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

我知道（）=> {} 这些是ES6中的新功能，但我在普通括号而不是括号中找不到任何内容。它们是什么？

I know () => {} these are new in ES6 but I cannot find anything on normal brackets instead of parentheses. What are they?

编辑

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

My index.js class (I have all the imports)

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 时，浏览器上无法获取/约。但是，当我点击关于按钮时，它会转到完全相同的网址 / about 并完全呈现

The error I'm getting. Cannot GET /about on the browser when I try to move to localhost:8080/about. However, when I click the about button, it goes to exactly the same url /about and renders perfectly

推荐答案

解决您的问题可能有点迟，您可能已经弄明白了。但这是我的看法：

This may be a bit late to address your issue and you may well have figured it out. But here's my take:

第一：

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

• 从表面上看，你似乎在比较苹果和橘子在这里。锚标记中的路径是相对路径，而链接中的路径是绝对路径（正确地说，我认为 react-router 支持相对路径）。这会产生的问题是你在 / blah ，而点击 Link 将会转到 / page ，点击< a href ='page'/> 将带你到 /嗒嗒/页。这可能不是问题，因为你确认了网址的正确性，但是请注意。


• 有点深刻的区别，这只是@Dennis答案的一个插件（和文档他指出，当你已经在一条符合 Link 所指向的路线时。假设我们目前在 / page ，链接指向 / page 甚至 / page /：id ，当< a /> 标签自然会。请参阅在Github 上的问题。


• On the surface, you seem to be comparing apples and oranges here. The path in your anchor tag is a relative path while that one in the Link is absolute (rightly so, I don't think react-router supports relative paths yet). The problem this creates is say you are on /blah, while clicking on your Link will go to /page, clicking on the <a href='page' /> will take you to /blah/page. This may not be an issue though since you confirmed the correctness of the url, but thought to note.
• A bit deeper difference, which is just an addon to @Dennis answer (and the docs he pointed to), is when you are already in a route that matches what the Link points to. Say we are currently on /page and the Link points to /page or even /page/:id, this won't trigger a full page refresh while an <a /> tag naturally will. See issue on Github.

我用来解决这个问题的一个修复方法是将一个州属性传递给像这样的链接< Link to = {{pathname：/ page，state：desiredState}}> Page< / Link> 。然后我可以在目标组件（例如< Page /> ） componentWillReceiveProps 中检查这一点，如下所示：

A fix I used to solve my little need around this was to pass in a state property into link like so <Link to={{pathname: "/page", state: "desiredState"}}>Page</Link>. Then I can check for this in the target component's (say <Page />) componentWillReceiveProps like so:

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

第二个问题：




反应路由器v4文档中的奇怪箭头功能...我在普通括号而不是括号中找不到任何内容。它们是什么？

the weird arrow function in react router v4 documentation... I cannot find anything on normal brackets instead of parentheses. What are they?

箭头功能;再次@Dennis和@Jaromanda X有点解决它。但是，我有三位要添加：

Arrow functions; again @Dennis and @Jaromanda X have kind of addressed it. However, I've got three bits to add:



• 当你有（）=> blah 没有大括号 {} ，你隐含地返回 => 在这种情况下 blah 。但是当你在箭头之后立即拥有花括号时，如果你愿意的话，现在你有责任返回。所以（）=> blah （顺便说一下，（）=>（blah）的同义词）将更像（ ）=> {return blah} 而不是（）=> {blah} 。


• 如果你想要返回一个对象会发生什么： {blah：blah} ;这就是@Jaromanda X指出的。然后，您需要执行（）=> （{blah：blah}）或只是（）=> （{blah}）用于隐式返回，或者您可以显式返回（）=> {return {blah：blah}} 。


• 我的第三点是指向 MDN


• When you have () => blah without the curly braces {}, you are implicitly returning whatever follows the => in this case blah. But when you have curly braces immediately after the arrow, then it's now your responsibility to return something if you so desire. So () => blah (which by the way is synonymous to () => (blah)) will be more similar to () => { return blah } and not () => { blah }.
• So what happens if you want to return an object: { blah: blah }; this is what @Jaromanda X was pointing at. You will then need to do () => ({ blah: blah }) or simply () => ({ blah }) for implicit return or you could return explicitly like so () => { return { blah: blah } }.
• My third bit is to point you to MDN

希望它帮助。

这篇关于反应链接与标签和箭头功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！