Как я могу использовать ссылку Navbar в Reactjs? - PullRequest
Новая
       14

Как я могу использовать ссылку Navbar в Reactjs?

0 голосов
/ 10 сентября 2018

Я пытаюсь создать сайт с помощью Reactjs. Я попытался создать Navbar и на Navbar, я создал 2 ссылки, которые дома и контакт. Когда я нажимаю, например, кнопку контакта, я вижу конечную точку на URL, но на странице ничего не происходит. Я уже создал Routes and Links, но я действительно не понял, почему я не могу использовать ссылки 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.

Ответы [ 4 ]

0 голосов
/ 10 сентября 2018

В вашем приложении должен быть только один экземпляр <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;
0 голосов
/ 10 сентября 2018

Попробуйте поставить ниже: 

<a routerLink="/contact" routerLinkActive="active">{{Your data}}</a>
0 голосов
/ 10 сентября 2018

Вы должны использовать только один экземпляр Router в приложении. Удалите 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;
0 голосов
/ 10 сентября 2018

In Navbar компонент, просто удалите <BrowserRouter>

Navbar компонент: 

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;

Надеюсь, это поможет!

...