反应路线：导航栏答案

【问题标题】：React Route: Navbar反应路线：导航栏
【发布时间】：2020-03-06 20:48:46
【问题描述】：

单击导航栏时呈现组件时出现问题。因此，当我单击导航栏时，组件会在导航栏内呈现，而不是在导航栏下方。有什么办法可以解决这个问题吗？

这是应用文件：

//App.js

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import { Header, Content } from './component/Layout/index';

import Films from './container/Films/Films';
import Peoples from './container/Peoples/Peoples';

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
  return (
    <BrowserRouter>
      <div className='App'>
        <Header />
        {/* <Content /> */}

        <Switch>
          <Route path='/films' component={Films} />
          <Route path='/peoples' component={Peoples} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

export default App;

这是导航栏文件：

//Header.js
import React from 'react';

import { Navbar, NavDropdown, Nav, NavItem } from 'react-bootstrap';

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import Films from '../../container/Films/Films';
import Peoples from '../../container/Peoples/Peoples';

import classes from './Header.module.css';

const Header = () => {
  return (
    <Router>
      <div className={classes.header}>
        <Navbar bg='dark' expand='lg'>
          <Navbar.Brand href='#home' className='text-white'>
            Swapiku
          </Navbar.Brand>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />

          <Nav className='mr-auto text-secondary'>
            <Nav.Link className='text-secondary' href='#films'>
              <Link to={'/films'}> Films </Link>
            </Nav.Link>
            <Nav.Link className='text-secondary' href='#people'>
              <Link to={'/peoples'}> People </Link>
            </Nav.Link>
          </Nav>
          <Switch>
            <Route path='/films' component={Films} />
            <Route path='/peoples' component={Peoples} />
          </Switch>
        </Navbar>
      </div>
    </Router>
  );
};

export default Header;

任何帮助将不胜感激，谢谢

【问题讨论】：

标签： reactjs bootstrap-4 react-router

【解决方案1】：

因为您的路线内容在导航栏中。试试这个

   <div className={classes.header}>
    <Navbar bg='dark' expand='lg'>
      <Navbar.Brand href='#home' className='text-white'>
        Swapiku
      </Navbar.Brand>
      <Navbar.Toggle aria-controls='basic-navbar-nav' />

      <Nav className='mr-auto text-secondary'>
        <Nav.Link className='text-secondary' href='#films'>
          <Link to={'/films'}> Films </Link>
        </Nav.Link>
        <Nav.Link className='text-secondary' href='#people'>
          <Link to={'/peoples'}> People </Link>
        </Nav.Link>
      </Nav>
    </Navbar>
   <Router>
      <Switch>
        <Route path='/films' component={Films} />
        <Route path='/peoples' component={Peoples} />
    </Switch>
  </Router>
  </div>

【讨论】：

【解决方案2】：

从 Header.js 中删除 Switch，如下所示


import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import Films from '../../container/Films/Films';
import Peoples from '../../container/Peoples/Peoples';

import classes from './Header.module.css';

const Header = () => {
  return (
    <Router>
      <div className={classes.header}>
        <Navbar bg='dark' expand='lg'>
          <Navbar.Brand href='#home' className='text-white'>
            Swapiku
          </Navbar.Brand>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />

          <Nav className='mr-auto text-secondary'>
            <Nav.Link className='text-secondary' href='#films'>
              <Link to={'/films'}> Films </Link>
            </Nav.Link>
            <Nav.Link className='text-secondary' href='#people'>
              <Link to={'/peoples'}> People </Link>
            </Nav.Link>
          </Nav>
        </Navbar>
      </div>
    </Router>
  );
};

export default Header;

【讨论】：

【解决方案3】：

您也在标题组件中使用相同的路由代码。从 Header.js 中删除路由器代码

请更新 Header.js

//Header.js
import React from 'react';

import { Navbar, NavDropdown, Nav, NavItem } from 'react-bootstrap';

import { Link } from 'react-router-dom';

import Films from '../../container/Films/Films';
import Peoples from '../../container/Peoples/Peoples';

import classes from './Header.module.css';

const Header = () => {
  return (

      <div className={classes.header}>
        <Navbar bg='dark' expand='lg'>
          <Navbar.Brand href='#home' className='text-white'>
            Swapiku
          </Navbar.Brand>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />

          <Nav className='mr-auto text-secondary'>
            <Nav.Link className='text-secondary' href='#films'>
              <Link to={'/films'}> Films </Link>
            </Nav.Link>
            <Nav.Link className='text-secondary' href='#people'>
              <Link to={'/peoples'}> People </Link>
            </Nav.Link>
          </Nav>
        </Navbar>
      </div>

  );
};

export default Header

【讨论】：