gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:39:04 26 4
gpt4 key购买 nike

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

最佳答案

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

第一:

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 答案(以及他指出的文档)的一个插件。指着。假设我们当前处于 /pageLink指向/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

希望有帮助。

关于javascript - React 链接与标签和箭头函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47223432/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com