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

Question

大家好，我是一名刚开始使用React Router的初学者。

我有两个问题。<Link to="/page">和之间有什么区别<a href="page">？两者都向完全相同的获取请求，/page但是当我使用时收到错误，<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

解决您的问题可能为时已晚，您可能已经解决了。但是，这是我的看法：

第一：

<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 />标记自然会刷新。参见Github上的问题。

我用来解决此问题的一种解决方法是将state属性传递给link这样<Link to={{pathname: "/page", state: "desiredState"}}>Page</Link>。然后，可以像下面这样在目标组件的（say <Page />）中检查它componentWillReceiveProps：

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

第二个问题：

React Router v4文档中的奇怪箭头功能…我在普通括号中没有找到任何内容，而不是括号。这些是什么？

箭头功能；@Dennis和@Jaromanda X再次解决了该问题。但是，我要添加三点：

• 如果() => blah没有花括号{}，则=>在这种情况下，您将隐式返回任何内容blah。但是，当您紧接箭头后的花括号时，return如果您愿意，现在这是您的责任。因此() => blah（顺便说一句是的同义词() => (blah)）将() => { return blah }与not 更相似() => { blah }。
• 所以，如果你想返回一个对象会发生什么：{ blah: blah }; 这就是@Jaromanda X所指的。然后，您将需要执行此操作() => ({ blah: blah })或仅() => ({ blah })进行隐式返回，或者可以像这样显式返回() => { return { blah: blah } }。
• 我的第三点是将您指向MDN

希望能帮助到你。