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

问题描述 投票:13回答:3

嗨,大家好,我是一名刚开始使用路由器的初学程序员。

我有两个问题。使用<Link to="/page"><a href="page">有什么区别?两者都对/page提出完全相同的get请求,但是当我使用<a href="page">时出现错误但是当我在嵌套路由时使用<Link to="/page">时它会起作用。我不明白当我知道两者都渲染到完全相同的URL时会有什么不同

其次是反应路由器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并完美呈现

javascript reactjs react-router
3个回答
28
投票

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

第一:

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

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

第二个问题:

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

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

  • 当你有没有大括号() => blah{}时,你隐含地返回=>之后的blah。但是当你在箭头之后立即有花括号时,如果你愿意的话,现在你有责任向return做些什么。所以() => blah(顺便说一下,它是() => (blah)的同义词)将更类似于() => { return blah }而不是() => { blah }
  • 那么如果你想要返回一个对象会发生什么:{ blah: blah };这就是@Jaromanda X指出的。然后你需要做() => ({ blah: blah })或简单的() => ({ blah })隐式返回,或者你可以像() => { return { blah: blah } }那样明确地返回。
  • 我的第三点是指向MDN

希望能帮助到你。


0
投票

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

关于() => {},这是一个被称为匿名函数或lambda表达式的构造。它与在变量中保存函数基本相同:var x = function(){ return (<div>...) };如果第一个括号中有任何内容,它是您可以访问的参数:const x = (y) => return y*2;它在React中完成的原因是将函数范围暴露给它所在的组件。


0
投票

没有比查看代码源更好的了。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js

你可以看到Link是一个内部使用历史的组件。这是反应路由器历史和导航背后的模块||库。并提供不同的模式(在内存历史记录,browserHistory,hashHistory。甚至自定义)。

是的,它作为相似性呈现锚标记,但默认行为被覆盖(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
    ) {

}

如果符合上述条件。它将使用历史记录(推送或替换)。否则它将使浏览器保持正常行为。因此,在这种情况下,它将只是一个普通的锚标签<a />。让浏览器处理target ='blank'的示例。条件很好解释。然后根据历史对象的类型。行为改变了。不是`本身的行为。但只是历史对象类型的结果。

In resume:

<Link />是一个组件,它呈现一个<a />锚标签。但是在主要条件下,会阻止默认行为(preventDefault())。这允许它将更改应用于历史对象(onClick事件)。哪个react-router导航基于。并且在如上所述的某些条件下。它只是回归到浏览器行为。而恰好是一个<a />锚标签(没有preventDefault())。

供使用。如果您使用的是React-router。然后你只需要使用Link


推荐问答