Создание панели навигации с помощью response-router-dom и response-bootstrap, response-router-bootstrap

Всем привет! В этом чрезвычайно коротком пошаговом руководстве по коду я покажу вам, как можно создать панель навигации с помощью response-router-dom, response-router-bootstrap и response-bootstrap!

Прежде всего, вы должны запустить свое приложение для реагирования на сервере, как обычно. Если вы не знаете, как это сделать, откройте этот мой блог на новой вкладке, а затем выполните все шаги для создания приложения для реагирования. После того, как вы закончите, снова вернитесь к этому блогу.

Теперь давайте установим следующие вещи, выполнив эту команду на нашем терминале:

npm я реагирую-маршрутизатор-дом реагирую-начальной загрузки реагирую-маршрутизатор-начальной загрузки

Поместите следующее в свой заголовок в файле index.html в «общедоступной» папке.

<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"

/>

Структура папок для нашего кода:

Теперь давайте создадим 3 разных файла следующим образом, чтобы мы могли продемонстрировать навигацию по каждому из них с помощью панели навигации.

Давайте откроем эти следующие коды и поместим эти крошечные коды в.

Contact.js:

import React from 'react';
function Contact() {
return <div>THIS IS THE CONTACT PAGE</div>;
}
export default Contact;

About.js:

import React from 'react';
function About() {
return <div>THIS IS THE ABOUT PAGE</div>;
}
export default About;

Home.js:

import React from 'react';
function Home() {
return <div>THIS IS THE HOMEPAGE</div>;
}
export default Home;

Navigation.js:

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import { LinkContainer } from 'react-router-dom';
function NavigationBar() {
return (
<Navbar bg="dark" expand="lg" variant="dark">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
export default NavigationBar;

Здесь мы импортировали все необходимые зависимости и создали простую панель навигации.

Для получения более подробной информации о Navbar-маршрутизаторах, ознакомьтесь с официальной документацией.

Теперь давайте импортируем необходимые зависимости в наш App.js, а также создадим нашу маршрутизацию с помощью Browser Router. Мы также указали, какому файлу соответствует каждый маршрут, используя Route.

import Contact from './components/Contact';
import About from './components/About';
import Home from './components/Home';
import NavigationBar from './components/NavigationBar';
import 'react-bootstrap/dist/react-bootstrap.min.js';
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<div className="App">
<Router>
<NavigationBar></NavigationBar>
<Route exact path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route exact path="/contact" component={Contact}></Route>
</Router>
</div>
);
}
export default App;

Теперь давайте внесем последние изменения в NavigationBar.js.

Используя LinkContainer, мы можем ссылаться на разные файлы, и тогда соответствующий файл будет отображаться, когда мы щелкаем по нему, как определено ранее в Routes в App.js.

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
function NavigationBar() {
return (
<Navbar bg="dark" expand="lg" variant="dark">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<LinkContainer to="/">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/about">
<Nav.Link>About</Nav.Link>
</LinkContainer>
<LinkContainer to="/contact">
<Nav.Link>Contact</Nav.Link>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
export default NavigationBar;

Если мы выполним все вышеупомянутые шаги, мы получим что-то вроде этого:

Спасибо, что остаетесь с нами до сих пор. Ваше здоровье.