小编cri*_*ris的帖子

我正在使用 gatsby 为我的客户创建一个静态网站。目前，我正在使用 gatsby 的内置 router 设置网站的导航Link。路线工作正常，这意味着每次我单击导航菜单链接时，它都会将我带到预期的目标页面，并且页面也会正确呈现，但是我不断在控制台中收到此恼人的警告：Prop `aria-current` did not match. Server: "null" Client: "page"

以下是我设置路由器的方法：

import React from 'react'
import { navbar } from './navbar.module.css'
import { Link } from 'gatsby'


const Layout = ({children}) => {
    return (
        <>  
            <Navbar />
            <main>
                {children}
            </main>
            <footer>@COPYRIGHT 2021. ALL RIGHTS RESERVED.</footer>
        </>
    )
}


const Navbar = () => {
    
    return (
        <div>
            <nav className={navbar}>
                <Link to='/'>
                    <h1>mel king</h1>
                </Link>
                <ul>
                    <li>                    
                        <Link to='/author' >author</Link>
                    </li>
                    <li> …

我需要帮助来应对这个编码挑战。

让函数 HTMLElements(str) 读取传递的 str 参数，该参数将是 HTML DOM 元素和纯文本的字符串。将使用的元素是：b、i、em、div、p。例如：如果 str 是"<div><b><p>hello world</p></b></div>"，则该 DOM 元素字符串嵌套正确，因此您的程序应返回字符串 true。

如果字符串嵌套不正确，则返回遇到的第一个元素，如果更改为不同的元素，将产生格式正确的字符串。如果字符串的格式不正确，那么它只是一个需要更改的元素。例如：如果 str 是"<div><i>hello</i>world</b>"那么您的程序应该返回字符串 div 因为如果第一个元素更改为 a <b>，则该字符串将被正确格式化。

例子：

Input: "<div><div><b><b/></div><p/>"
output: <div>

Input: "<div>abc</div><p><em><i>test test test</b></em></p>"
output: i

这是我已经走了多远：

function HTMLElements(str) { 

 let openingTag = str.match(/<\w+>/g)
 let closingTag = str.match(/(<\/\w+>)/g)
 let strObj = {
  '<div>': '</div>',
  '<p>': '</p>',
  '<i>': '</i>',
  '<p>': '</p>',
  '<em>': '</em>',  
  '<b>': '</b>',
  }

  let unclosedElem = []

  for(let i=0; i<openingTag.length; i++){
     console.log(closingTag)
    if(closingTag.indexOf(strObj[openingTag[i]]) ===-1){
      unclosedElem.push(closingTag.splice(closingTag.indexOf(strObj[openingTag[i]]),1))
    } …