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

Question

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

我有两个问题.使用<Link to="/page">和有<a href="page">什么区别？两者都提出完全相同的get请求,/page但是<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按钮时,它会转到完全相同的URL /about并完美呈现

Answer 1

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

第一:

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

• 从表面上看,你似乎在这里比较苹果和橘子.你的锚标签中的路径是一个相对路径,而那个路径中的路径Link是绝对的(正确地说,我认为它还不react-router支持相对路径).这样做会产生的问题就是说你正在/blah点击你的Link遗嘱/page,点击该<a href='page' />遗嘱就会带你去/blah/page.这可能不是问题,因为您确认了网址的正确性,但请注意.
• 更深层次的差异,只是@Dennis答案(以及他指出的文档)的一个插件,就是当你已经处于与Link点相匹配的路线时.假设我们当前正在开启/page和Link点,/page甚至/page/:id,这将不会触发整页刷新,而<a />标签自然会.请参阅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

希望能帮助到你.

Answer 2

href 属性会触发页面刷新，从而重置应用程序状态。但是 react-router 的 link 和 navlink 不会触发页面刷新。由于 React 大部分时间用于创建单页应用程序，因此在处理路由时请确保选择 Link 或 Navlink