Question

我正在尝试从那里使用reactstrap导航栏 https://react-bootstrap.github.io/components/navbar/ 使用路由器v4。

这是我的代码：

import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
import './customnavbar.css'

class CustomNavbar extends Component {
  render() {
    return (
      <Navbar style={{backgroundColor : '#1e272e'}} expand="lg">
        <Navbar.Brand style={{color : 'white' }} href="/">Vincent Sérièges</Navbar.Brand>
        <Navbar.Toggle style={{backgroundColor : 'white' }} aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto" style={{ width:'100%', textAlign:'center', justifyContent : 'flex-end'}}>
            <NavLink style={{color : 'white', paddingRight:'25px', paddingLeft:'25px' }} to="/">Home</NavLink>
            <NavLink style={{color : 'white', paddingRight:'25px', paddingLeft:'25px'  }} to="/portfolio">Portfolio</NavLink>
            <NavLink style={{color : 'white', paddingRight:'25px', paddingLeft:'25px'  }} to="/about">About</NavLink>
            <NavLink style={{color : 'white', paddingRight:'25px', paddingLeft:'25px'  }} to="/contact">Contact</NavLink>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default CustomNavbar;

您可以在此链接上看到结果： http://vincentserieges.com/

当您单击菜单项时，路由工作正常，但是刷新页面时在此服务器上找不到请求的URL / portfolio。

有人能指导我解决这个麻烦吗？

PS：路由在webpack-dev-server上完美运行

带有路由器dom Navlinks的React-bootstrap Navbar

0 个答案: