react链接与标签和箭头功能

IT技术 javascript reactjs react-router
2021-03-25 09:19:22

我刚开始使用react-router。

我有两个问题。using<Link to="/page">和 和有<a href="page">什么不一样?两者都发出完全相同的 get 请求,/page但我在使用时遇到错误,<a href="page"><Link to="/page">在我嵌套路由时使用它时它可以工作我不明白,当我知道两者都渲染到完全相同的 url 时,怎么会有任何区别?

其次是 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并完美呈现

4个回答

解决您的问题可能有点晚了,您可能已经想通了。但这是我的看法:

第一的:

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

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

第二个问题:

react router v4文档中奇怪的箭头函数......我在普通括号而不是括号上找不到任何东西。这些是什么?

箭头函数;@Dennis 和 @Jaromanda X 再次解决了这个问题。但是,我要补充三点:

  • 当您() => blah没有花括号时{}=>在这种情况下,您将隐式返回 后面的任何内容blah但是,当您在箭头后立即使用花括号时,return如果您愿意,现在就应该对某些事情负责因此() => blah(顺便说一下,它是 的同义词() => (blah))将更类似于() => { return blah }而不是() => { blah }
  • 所以,如果你想返回一个对象会发生什么:{ blah: blah }; 这就是@Jaromanda X 所指的。然后,您将需要执行() => ({ blah: blah })或仅() => ({ blah })用于隐式返回,或者您可以像这样显式返回() => { return { blah: blah } }
  • 我的第三点是把你指向MDN

希望能帮助到你。

@amrs-tech 在没有看到您对路线所做的事情的情况下提出建议是很乏味的。但是,您可以尝试在黑暗中尝试从使用 react-router 切换render到使用componentprops。也就是说,如果您正在做<Route render={() => <YourComponent />} />,请尝试<Route component={YourComponent} />¯_(ツ)_/¯ 祝你好运!
2021-06-05 09:19:22
就我而言,我面临同样的问题,即 react-router 确实更改了 URL,但没有更改页面内容。在我也尝试了您的解决方案后,它不起作用。有什么建议 ?
2021-06-10 09:19:22
在 react hooks 中,我遇到了<Link href="">. 该页面不会完全加载,但<a href="">确实如此。
2021-06-13 09:19:22

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

该组件允许您做比普通链接元素更多的事情。例如,因为它是一个 React 组件,所以你有一个状态和什么没有的好处(如果你想要的话)。您可以在此处查看更多文档 如果没有错误,我不确定会发生什么,但我怀疑路由库希望您通过普通的 html 元素使用该组件。

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

嗨,我已编辑以显示错误和我的课程。你认为你知道问题是什么吗?
2021-06-02 09:19:22
据我所知,在 React Route v4 和 v4 中不推荐使用 routehandler,似乎我们必须将路由直接放在子类中。我指的是这个页面reacttraining.com/react-router/web/example/basic
2021-06-19 09:19:22
@serendipity 只要您不使用任何其他时髦的业务,我就不确定。<Link to="/something">Link</Link> 将 URI 更改为 /something,然后您的 <Route path="/something" component={Something} /> 应该选择它并渲染任何 <Something />是。你说它与 <a> 一起工作,这是否意味着正确的组件被渲染?您可以尝试将您的代码与这个有效的代码进行比较。fiddle.jshell.net/terda12/mana88Lm
2021-06-21 09:19:22

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

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

您可以看到这Link是一个内部使用history的组件这是react-router历史和导航背后的module||库。并带有不同的模式(在内存历史、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' 的示例。条件得到了很好的解释。然后取决于历史对象的类型。行为改变。不是`本身的行为。但只是历史对象类型的结果。

在简历中:

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

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