Кнопка с навигацией на другую страницу в навигационной панели

Question

Я хотел вставить кнопки в навигационную панель материализации для перехода на другие страницы. Как я могу создать кнопку, которая поможет мне открыть другую страницу. Я использовал «Linked to» от реакции-роутера, но он не работает. Большое спасибо за ваш ответ

import { Link } from "react-router-dom";  

<nav>
        <div class="nav-wrapper blue lighten-2">
          <a class="brand-logo left">
            <img scr="/images/logo_small.png"></img>
          </a>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li>
              <a href="teechrworks.html">How teechr works?</a>
            </li>
            <li>
              <a href="aboutus.html">About us</a>
            </li>
            <ul>
              <li>
                <Link to="/chooseachatbottype">Get started!</Link>
              </li>
            </ul>
            <Link style={navStyle} to="/createquiz1">
              <li>Create your quizbot!</li>
            </Link>
            <li>
              <a href="signin.html" a class="waves-effect waves-light btn">
                Sign in
              </a>
            </li>
          </ul>
        </div>
      </nav>
```

Answer 1

pass prop of target = "__ blank" должно работать как в стандарте HTML.

Создайте ваши ссылки в const, и у вас будет лучший обзор. Не добавлены ваши стили ...

import React, { Fragment, useEffect } from 'react';
import { Link } from 'react-router-dom';


    const Navbar = () => {

      const links = (
        <Fragment>
          <li>
            <Link className="link-item" to='/'>Home</Link>
          </li>
          <li>
            <a className="link-item" href="https://www.google.com" target="__blank">External Website</a>
          </li>
        </Fragment>
      )

      return (
        <Fragment>
          <div className="nav-wrapper">
            <ul>
              {links}
            </ul>
          </div>
        </Fragment>
      )
    }

    export default Navbar;

Ваша опечатка:

  <a class="brand-logo left">
    <img scr="/images/logo_small.png"></img>
  </a>

ср c не скр

Answer 2

Я только что попытался очистить ваш код, так как * * * * * * * был элемент li. Это должно работать:

<nav>
  <div class="nav-wrapper blue lighten-2">
    <a class="brand-logo left">
      <img src="/images/logo_small.png"></img>
    </a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li>
        <a href="teechrworks.html">How teechr works?</a>
      </li>
      <li>
        <a href="aboutus.html">About us</a>
      </li>
      <li>
        <Link to="/chooseachatbottype">Get started!</Link>
      </li>
      <li>
        <Link style={navStyle} to="/createquiz1">
          Create your quizbot!
        </Link>
      </li>
      <li>
        <a href="signin.html" a class="waves-effect waves-light btn">
          Sign in
        </a>
      </li>
    </ul>
  </div>
</nav>