jjzjj

javascript - React Pose + React Router 键无法识别？

coder 2025-01-31 原文

所以我有一个小型 React 应用程序。尝试使用 React Pose 来制作页面转换动画。我遵循了与 one of the official demos with react-router-dom 类似的结构，如果我正在看这个权利，它应该可以工作。但是，我收到一条错误消息:

Error: HEY, LISTEN! Every child of Transition must be given a unique key

.... 并直接指向下面的代码。是否有某种方法可以在这里创建 key ？每个页面中是否有可能导致此处出现问题的元素？轨迹仅直接指向这部分代码(特别是 PoseGroup)，所以我不确定我在这里遗漏了什么。

const RouteContainer = posed.div({
    enter: { opacity: 1, delay: 350, beforeChildren: true, y: 0 },
    exit: { opacity: 0, y: -50 }
});

const Routes = (props) => {
    return(
        <Route render={({ location }) => (
            <PoseGroup>
                <RouteContainer key={location.key}>
                    <Switch location={location}>
                        <Route exact path="/" component={Home} key="home"/>
                        <Route path="/about" component={About} key="about"/>
                        <Route path="/bugs" component={Bugs} key="bugs"/>
                        <Route path="/security" component={Security} key="security"/>
                        <Route path="/aur" component={Aur} key="aur"/>
                        <Route path="/download" component={Download} key="download"/>
                    </Switch>
                </RouteContainer>
            </PoseGroup>
        )}/>
    )
}

如有任何想法或建议，我们将不胜感激。我不确定它是否需要返回的各个页面的 key ，或者我是否缺少其他内容。

编辑

所以，奇怪的是，删除所有 PoseGroup 元素(即将其分解为 Switch 和 Route 子元素，删除所有动画)保存并重新启动应用程序，然后重新添加完全相同的代码，工作正常。我不完全明白这里发生了什么，除非存在某种浏览器缓存问题或其他类似问题？

最佳答案

在他们的 github 页面上提出刷新错误后，其中一个人指出，RouteContainer 不应具有 location.key，而应替换为 location.pathname 以获得更好的准确性。这样做之后，刷新错误停止发生并且一切正常。这就是最终代码的样子。

const Routes = (props) => {
    return(
        <Route render={({ location }) => (
            <PoseGroup>
                <RouteContainer key={location.pathname}>
                    <Switch location={location}>
                        <Route exact path="/" component={Home} key="home"/>
                        <Route path="/about" component={About} key="about"/>
                        <Route path="/bugs" component={Bugs} key="bugs"/>
                        <Route path="/security" component={Security} key="security"/>
                        <Route path="/aur" component={Aur} key="aur"/>
                        <Route path="/download" component={Download} key="download"/>
                    </Switch>
                </RouteContainer>
            </PoseGroup>
        )}/>
    )
}

仍然不确定什么会导致刷新错误首先发生，但至少可以解决问题。

关于javascript - React Pose + React Router 键无法识别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52583840/

Reactjavascript34componentRoutereactjsanimationreact-router-v4

有关javascript - React Pose + React Router 键无法识别？的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  3. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  4. ruby-on-rails - 如何优雅地重启 thin + nginx？ - 2

    我的瘦服务器配置了nginx，我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例，但找不到好的解决方案。有没有人能做到这一点？ 最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器，例如server{listen80;server

  5. ruby-on-rails - 无法在centos上安装therubyracer(V8和GCC出错) - 2

    我正在尝试在我的centos服务器上安装therubyracer，但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e

  6. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  7. ruby - 无法覆盖 irb 中的 to_s - 2

    我在pry中定义了一个函数:to_s，但我无法调用它。这个方法去哪里了，怎么调用？pry(main)>defto_spry(main)*'hello'pry(main)*endpry(main)>to_s=>"main"我的ruby版本是2.1.2看了一些答案和搜索后，我认为我得到了正确的答案:这个方法用在什么地方？在irb或pry中定义方法时，会转到Object.instance_methods[1]pry(main)>defto_s[1]pry(main)*'hello'[1]pry(main)*end=>:to_s[2]pry(main)>defhello[2]pry(main)

  8. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类

  9. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  10. ruby-on-rails - 无法让 rspec、spork 和调试器正常运行 - 2

    GivenIamadumbprogrammerandIamusingrspecandIamusingsporkandIwanttodebug...mmm...let'ssaaay,aspecforPhone.那么，我应该把“require'ruby-debug'”行放在哪里，以便在phone_spec.rb的特定点停止处理？(我所要求的只是一个大而粗的箭头，即使是一个有挑战性的程序员也能看到:-3)我已经尝试了很多位置，除非我没有正确测试它们，否则会发生一些奇怪的事情:在spec_helper.rb中的以下位置:require'rubygems'require'spork'

随机推荐