我刚刚开始使用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按钮时,它将转到完全相同的url /about,并且呈现完美

最佳答案

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

首先:


  • 从表面上看,您似乎在这里比较苹果和橘子。 anchor 标记中的路径是相对路径,而Link中的路径是绝对路径(没错,我不认为react-router还不支持相对路径)。这造成的问题是说您使用的是/blah,而单击您的Link会转到/page,单击<a href='page' />会将您转到/blah/page。不过,由于您确认了url的正确性,所以这可能不是问题,但请注意。
  • 当您已经处于与Link指向的路线相匹配的 route 时,更深的区别是@Dennis答案(以及他所指向的文档)的附加项。假设我们当前使用的是/page,并且Link指向/page甚至是/page/:id,这不会触发整个页面刷新,而<a />标签自然会触发。参见issue on Github

  • 我用来解决此问题的一个解决方法是将state属性传递到<Link to={{pathname: "/page", state: "desiredState"}}>Page</Link>这样的链接中。然后,可以像下面这样在目标组件的(例如<Page />)componentWillReceiveProps中进行检查:
    componentWillReceiveProps(nextProps){
      if (nextProps.location.state === 'desiredState') {
        // do stuffs
      }
    }
    

    第二个问题:



    箭头功能; @Dennis和@Jaromanda X再次解决了该问题。但是,我要添加三点:
  • 当您拥有不带花括号() => blah{}时,您将隐式返回=>之后的所有内容(在本例中为blah)。但是,当您紧接箭头后的花括号时,如果您愿意,现在有责任对某些内容进行return编码。因此() => blah(顺便说一句,它是() => (blah)的同义词)将更类似于() => { return blah }而不是() => { blah }
  • 那么,如果您想返回一个对象,该怎么办?这就是@Jaromanda X所指的。然后,您将需要执行{ blah: blah }或仅执行() => ({ blah: blah })进行隐式返回,或者可以像() => ({ blah })那样显式返回。
  • 我的第三点是将您指向MDN

  • 希望能帮助到你。

    关于javascript - react 链接与标记和箭头功能,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43087007/

    10-09 18:01
    查看更多