带有导航栏中其他页面的按钮具体化反应

Question

我想在 materialize 的导航栏中插入按钮以导航到其他页面。如何创建一个按钮来帮助我打开另一个页面。我使用了来自 react-router 的"链接到"，但它不起作用。非常感谢您的回复

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

我只是试图清理你的代码，因为在li元素之外有一个Link。这应该有效：

<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>

Answer 2

传递 target="__blank" 的道具应该像在 Standart 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>

SRC 不是 SCR