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

我刚开始使用路由器

我有两个问题。使用

和

有什么区别？两者对

/page

发出完全相同的get请求，但在使用

时出现错误，但在嵌套路由时使用

时，该请求有效。我不明白，当我知道两者呈现到完全相同的url时，怎么会有任何区别呢

第二个是react router v4文档中的怪异箭头函数

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

我的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;

类应用程序扩展组件{
render（）{
返回(
代码

家
关于
教师
课程

);
}
}
导出默认应用程序；

我犯的错误。

---

当我尝试移动到

localhost:8080/about

时，

无法在浏览器上获取/about

。但是，当我单击

关于

按钮时，它会转到完全相同的url

/about

，并完美地呈现

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

---

关于

（）=>{}

这是一个称为匿名函数或lambda表达式的构造。它基本上与在变量中保存函数相同：

var x=function（）{return（…）}

如果第一个括号中有任何内容，那么它是您可以访问的参数：

constx=（y）=>返回y*2在React中执行此操作的原因是将函数作用域公开给它所在的组件。
解决您的问题可能有点晚，您可能已经解决了。但我的看法是：

第一名：

使用
和
有什么区别

我用来解决这个问题的一个小问题是将
状态
属性传递到像这样的
页面
链接中。然后我可以在目标组件中检查这一点（比如说
）
组件将接收道具，如下所示：

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

第二个问题：

react router v4文档中的怪异箭头函数。。。我在普通括号中找不到任何东西，而不是括号。它们是什么

箭头功能；再一次，@Dennis和@Jaromanda X已经解决了这个问题。但是，我要补充三点：


如果您有
（）=>blah
而没有大括号
{}
，那么在本例中，您将隐式返回
=>
后面的内容。但是，当你在箭头后面紧跟着一个大括号时，如果你愿意，现在你有责任
返回
一些东西。因此，
（）=>blah
（顺便说一下，它是
（）=>（blah）
）的同义词）将更类似于
（）=>{return blah}
，而不是
（）=>{blah}

那么，如果您想要返回一个对象，会发生什么呢：
{blah:blah}
；这就是@Jaromanda X所指的。然后需要执行
（）=>（{blah:blah}）
或简单地
（）=>（{blah}）
进行隐式返回，或者可以像这样显式返回
（）=>{return{blah:blah}
我的第三点是指给你看

希望有帮助。
没有比查看代码源代码更好的了


您可以看到，
Link
是一个组件，它在内部使用历史记录。这是react路由器历史和导航后面的模块库。并且具有不同的模式（内存历史记录、浏览器历史记录、哈希历史记录，甚至自定义）

是，作为一种相似性，它呈现一个锚标记，但默认行为被覆盖（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
    ) {

}

如果满足上述条件。它将使用历史记录（推送或更换）。否则，它将使浏览器保持正常行为。因此，在这种情况下，它将只是一个普通的锚定标记
。让浏览器处理target='blank'的示例。这种情况解释得很清楚。
然后根据历史对象的类型。行为改变了。不是`本身的行为。但这只是历史对象类型的结果

在简历中：
是一个组件，用于呈现
锚定标记。但是，在主要条件下，默认行为是被阻止的（
preventDefault（）
）。允许它将更改应用于历史对象（
onClick
event）。路由器导航基于哪种反应。以及上述的一些条件。它只是退回到浏览器行为。只需做一个锚定标记（无
preventDefault（）
）

供使用。如果您使用的是React路由器。然后您只需要使用
链接
 href属性将触发页面刷新，从而重置应用程序状态。但是react路由器的链接和导航链接不会触发页面刷新。由于React在大多数情况下用于创建单页应用程序，请确保在处理路由时选择Link或Navlink
我感到困惑，因为
（）
是括号。。。所以您知道大括号
{}
，您知道箭头函数中何时隐含
返回
，以及需要返回值时何时需要返回？你也知道你什么时候出生吗
  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
    ) {

}