Как я могу использовать ссылку Navbar в Reactjs?
Я пытаюсь создать веб-сайт с помощью Reactjs. Я попытался создать панель навигации, а на панели навигации я создал 2 ссылки: «Домой» и «Контакт». Когда я нажимаю, например, кнопку контакта, я вижу конечную точку по URL-адресу, но на странице ничего не происходит. Я уже создал маршруты и ссылки, но я действительно не понимал, почему я не могу использовать ссылки Navbar. Вы можете мне помочь, пожалуйста? Заранее спасибо.
import React from 'react';
import PropTypes from 'prop-types';
import {BrowserRouter, Link} from "react-router-dom";
const Navbar = () => {
return (
<BrowserRouter>
<nav>
<ul>
<li><Link to='/'>Sağlık Hizmetim</Link></li>
<li><Link to='/contact'>İletişim</Link></li>
</ul>
</nav>
</BrowserRouter>
);
};
Navbar.propTypes = {};
export default Navbar;
Это был мой компонент Navbar.
import React from 'react';
import {Route,BrowserRouter,Switch} from 'react-router-dom';
import Contact from "./Contact";
import Home from './Home';
const Routes = () => {
return (
<BrowserRouter>
<Switch>
<Route exact path='/' component = {Home}/>
<Route path='/contact' component = {Contact}/>
</Switch>
</BrowserRouter>
);
};
export default Routes;
Это был мой компонент Route. Кроме того, я вызвал компонент маршрута и навигационной панели в App.js.
Спасибо за ответ, но он не работает :(
вы пробовали <Link> <li>? наоборот?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
В компоненте Навбар просто удалите <BrowserRouter>
Компонент Навбар:
import React from 'react';
import PropTypes from 'prop-types';
import {Link} from "react-router-dom";
const Navbar = () => {
return (
<nav>
<ul>
<li><Link to='/'>Sağlık Hizmetim</Link></li>
<li><Link to='/contact'>İletişim</Link></li>
</ul>
</nav>
);
};
Navbar.propTypes = {};
export default Navbar;
Компонент Маршруты:
import React from 'react';
import {Route,BrowserRouter,Switch} from 'react-router-dom';
import Contact from "./Contact";
import Home from './Home';
import Navbar from './Navbar';
const Routes = () => {
return (
<BrowserRouter>
<div>
<Navbar />
<Switch>
<Route exact path='/' component = {Home}/>
<Route path='/contact' component = {Contact}/>
</Switch>
</div>
</BrowserRouter>
);
};
export default Routes;
Надеюсь на эту помощь!
Вы не должны использовать <Link> вне <Router>
Может быть, в нашем приложении должен быть только один <BrowserRouter>. Вы должны попробовать вызвать компонент Navbar в <BrowserRouter> компонента Routes.
Я меняю ссылки, которые находятся в компоненте навигационной панели, на тег href, и теперь он работает. :))
Я только что обновил свой ответ, можете проверить его еще раз!
Попробуйте поставить ниже:
<a routerLink = "/contact" routerLinkActive = "active">{{Your data}}</a>
Вы должны использовать только один экземпляр маршрутизатора в приложении. Удалите BrowserRouter из компонента Navbar и попробуйте:
import React from 'react';
import PropTypes from 'prop-types';
import {BrowserRouter, Link} from "react-router-dom";
const Navbar = () => {
return (
<nav>
<ul>
<li><Link to='/'>Sağlık Hizmetim</Link></li>
<li><Link to='/contact'>İletişim</Link></li>
</ul>
</nav>
);
};
Navbar.propTypes = {};
export default Navbar;
эй, при удалении BrowserRouter я получил еще одну ошибку, в которой говорится: «Вы не должны использовать <Link> вне <Router>»
В вашем приложении должен быть только один экземпляр <BrowserRouter />. Удалите один из <Navbar /> и замените все ссылки на <NavLink /> следующим образом;
import React from "react";
import PropTypes from "prop-types";
import { NavLink } from "react-router-dom";
const Navbar = () => {
return (
<nav>
<ul>
<li>
<NavLink to = "/">Sağlık Hizmetim</NavLink>
</li>
<li>
<NavLink to = "/contact">İletişim</NavLink>
</li>
</ul>
</nav>
);
};
Navbar.propTypes = {};
export default Navbar;Благодарю за ваш ответ. Но когда я меняю ссылки на навигационные ссылки и удаляю BrowserRouter, я получаю еще одну ошибку, в которой говорится: «Вы не должны использовать <Route> или withRouter () вне <Router>».
Попробуйте
<Route exact path='/contact' component = {Contact}/>