我刚刚开始使用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
,并且呈现完美 最佳答案
解决您的问题可能为时已晚,您可能已经解决了。但是,这是我的看法:
首先:
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 }
。 { blah: blah }
或仅执行() => ({ blah: blah })
进行隐式返回,或者可以像() => ({ blah })
那样显式返回。 希望能帮助到你。
关于javascript - react 链接与标记和箭头功能,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43087007/