Я пытаюсь использовать реактивный маршрутизатор с реактивной лентой в приложении create-reat. Страница маршрутизации мне нужно было использовать состояние для реактивной ленты, поэтому я преобразовал маршрутизатор из переменной в класс. Я получаю это предупреждение: Предупреждение: validateDOMNesting (...): <a> cannot appear as a descendant of <a>. Я не знаю, что делать? Мне нужно было стилизовать навигацию маршрутизатора с использованием responsestrap, поэтому я сделал то, что вы видите ниже.

Это не сработало по многим причинам:

<NavLink componentClass={Link} href="/contact" to="/contact" active={location.pathname === '/contact'}>anywords</NavLink>
<Navbar  dark id="RouterNavbar" expand="md">
          <NavbarBrand id="NavBrand"href="#x"><ul>(a bunch of li not relevant)</ul></NavbarBrand>
<NavbarToggler id="NavBarToggler"  onClick={this.toggle1.bind(this)}  />
          <Collapse  isOpen={this.state.isOpen1}  navbar>
            <Nav   className="ml-auto"  navbar>
            <NavItem>
                <NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>
              </NavItem>
(then just more of the above)

Кроме пары ли, приближающихся друг к другу в случайное время, и мне иногда приходится обновлять страницу вместо нормального поведения (автообновление) и предупреждения, которое я получаю в консоли, ничего плохого не происходит, но когда я читаю об этом вопрос, я узнал, что я не должен это делать.

28
Amr 11 Апр 2019 в 08:40

2 ответа

Лучший ответ

Это код, который вызвал ошибку,

<NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>

Который преобразуется в,

<a><a></a></a>

Итак, вы получаете ошибку,

Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>

Чтобы решить эту проблему, просто используйте один из следующих,

<NavLink id="RouterNavLink" style={None} to="/contact">anywords</NavLink>

ИЛИ,

<Link id="RouterNavLink" style={None} to="/contact">anywords</Link>
6
ravibagul91 11 Апр 2019 в 05:56

Добавьте as опору (ранее componentClass) в исходный NavLink, чтобы сохранить стилизацию, а также отключить предупреждение. https://react-bootstrap.netlify.com/components/navs / # нав - канальный реквизит

Или Просмотреть снимок экрана

Оригинал:

<NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>

Новое:

<Nav.Link as={Link} to="/contact">anywords</Nav.Link>

3
KSankar 15 Сен 2019 в 01:23