小编典典

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

reactjs

大家好,我是一名刚开始使用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并呈现完美


阅读 232

收藏
2020-07-22

共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

希望能帮助到你。

2020-07-22