«Как сделать функциональный Навбар» - PullRequest
Новая
       24

«Как сделать функциональный Навбар»

0 голосов
/ 06 ноября 2019

Я довольно новичок в React, и я пытаюсь реализовать Navbar с реакцией-начальной загрузкой. У меня настроена панель навигации, но на самом деле она не связана ни с одной из моих страниц.

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

import React from "react";
import ReactDOM from "react-dom";
import "./components/stylesheets/index.css";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.min.css";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
serviceWorker.unregister();

import React, { Component } from "react";
import "./components/stylesheets/App.css";
import NavBar from "./components/NavBar";
import Home from "./components/Home";
import About from "./components/About";

class App extends Component {
  render() {
    return <NavBar />;
  }
}

export default App;

import React, { Component } from "react";
import { Navbar, Nav, Form, FormControl, Button } from "react-bootstrap";
import "./stylesheets/NavBar.css";

class NavBar extends Component {
  state = {};
  render() {
    return (
      <div id="bar">
        <Navbar bg="light" variant="light">
          <Navbar.Brand href="#home">CALC-U</Navbar.Brand>
          <Nav className="ml-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#about">About</Nav.Link>
            <Nav.Link href="#updates">Updates</Nav.Link>
            <Nav.Link href="#profile">Profile</Nav.Link>
          </Nav>
        </Navbar>
      </div>
    );
  }
}

export default NavBar;

Я хочу, чтобы приложение автоматически открывалось до домашней страницы, а затем открывало другие страницы, если кнопка нажата на панели навигации.

Ответы [ 2 ]

1 голос
/ 06 ноября 2019

Редактировать : я создал рабочий пример, вы можете проверить код: Codesandbox

Похоже, вы не используете react-router для обработки ссылок.

Сначала вам нужно обернуть ваш компонент BrowserRouter следующим образом: 

import { BrowserRouter } from "react-router-dom";
import App from "./App";

const app = (
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

ReactDOM.render(app, document.getElementById("root"));

И в NavBar.js внутри компонента <Switch /> вы объявляете маршруты: 

import { Switch, Route, Link } from "react-router-dom";
//(...)
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Switch>

В вашем случае вы используете Link компонент внутри вашего Nav.Link:

<Nav className="ml-auto">
  <Nav.Link as={Link} to="/">Home</Nav.Link>
  <Nav.Link as={Link} to="/about">About</Nav.Link>
</Nav>

То же самое относится, если вы хотите добавить больше ссылок на NavBar.

0 голосов
/ 06 ноября 2019

Пример приложения, использующего act-bootstrap для Navbar

App.js 

function App() {
  return (
    <div>
      <Router>
        <NavBar />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" exact component={About} />
          <Route path="/updates" exact component={Updates} />
          <Route path="/profile" exact component={Profile} />
        </Switch>
      </Router>
    </div>
  );
}
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Updates = () => <h1>Updates</h1>;
const Profile = () => <h1>Profile</h1>;

NavBar.js 

class NavBar extends React.Component {
  state = {};
  render() {
    return (
      <div id="bar">
        <Navbar bg="light" variant="light">
          <Navbar.Brand href="/">CALC-U</Navbar.Brand>
          <Nav className="ml-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/about">About</Nav.Link>
            <Nav.Link href="/updates">Updates</Nav.Link>
            <Nav.Link href="/profile">Profile</Nav.Link>
          </Nav>
        </Navbar>
      </div>
    );
  }
}
...