javascript - React 链接与标签和箭头函数

Question

我刚刚开始使用 React Router。

我有两个问题。使用<Link to="/page">有什么区别和<a href="page"> ？两者都向 /page 发出完全相同的 get 请求但当我使用 <a href="page"> 时出现错误但当我使用 <Link to="/page"> 时它有效当我嵌套路线时。我不明白，当我知道两者都呈现完全相同的网址时，怎么可能有什么区别？

第二个是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;

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

Answer 1

现在解决您的问题可能有点晚了，您可能已经找到答案了。但这是我的看法:

第一:

What is the difference between using <Link to="/page"> and <a href="page">

• 从表面上看，您似乎是在比较苹果和橘子。 anchor 标记中的路径是相对路径，而 Link 中的路径是相对路径。是绝对的(正确的是，我认为 react-router 还不支持相对路径)。这造成的问题是假设你在 /blah ，同时点击您的Link将转到/page ，单击<a href='page' />将带您到/blah/page 。虽然这可能不是问题，因为您确认了网址的正确性，但请注意。
• 更深层次的区别是，当您已经处于与 Link 匹配的路线时，这只是 @Dennis 答案(以及他指出的文档)的一个插件。指着。假设我们当前处于 /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
  }
}

第二个问题:

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 再次解决了这个问题。不过，我有三点要补充:

• 当您有() => blah时没有花括号 {} ，您隐式返回 => 后面的任何内容在这种情况下blah 。但是，当箭头后面紧跟着大括号时，那么现在您有责任 return如果你愿意的话。所以() => blah (顺便说一句，它与 () => (blah) 同义)将更类似于 () => { return blah }而不是() => { blah } .
• 如果你想返回一个对象会发生什么:{ blah: blah } ;这就是 @Jaromanda X 所指的。然后您需要执行 () => ({ blah: blah })或者简单地() => ({ blah })对于隐式返回，或者您可以像这样显式返回 () => { return { blah: blah } } .
• 我的第三点是向您指出 MDN

希望有帮助。