Day23 create React Navigation

昨天己经安装了react-router-dom，在index.js页面中导入 BrowserRouter，在App.js页面中导入Route 和 Switch并完成了React Router path component设定，今天将继续介绍创建一个简单的 React 导航栏Navigation。

1.建立一个Navbar.js，导入{NavLink} react-router-dom

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

2.在HTML中如要建立Navigation中的各页面连结是用<a href="#home">home </a>标签，在React中建立页面连结用< NavLink to =” ”>，首页一样加上exact。

<NavLink exact to="/"> home </NavLink>

3.最後再把Navbar模组加到App.js中。

Navbar.js

import React from 'react';
import{ NavLink } from 'react-router-dom';


const Navbar = () => {
    return (
        <div>
          <div className="header-2">
          <div id="menu-bar" class="fas fa-bars"></div>
          <nav className="navbar">
              <NavLink exact to="/"> home </NavLink>
              <NavLink to="/About US"> About US </NavLink>
              <NavLink to="/product"> product </NavLink>
              <NavLink to="/Services"> Services </NavLink>
              <NavLink to="/contact"> contact </NavLink>
          </nav>

          <div className="icons">
              <i class="fas fa-shopping-cart"></i>     
              <i class="fas fa-user-circle"></i>
              <i class="fas fa-map-marker-alt"></i>
          </div>

          </div>  
        </div>
    )
}

export default Navbar;

App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Product from './Product';
import Services from './Services';
import Contact from './Contact';
import Error from './Error';
import Navbar from './Navbar';


const App = () => {
  
  }
  return (
    <div>    
       <Navbar />
       <Switch>       
         <Route exact path="/" component = {Home} />
         <Route  path="/about" component = {About} />
         <Route  path="/product" component = {Product} />
         <Route  path="/Services" component = {Services} />
         <Route  path="/contact" component = {Contact} />         
         <Route  component = {Error} />
       </Switch>      
    </div>
  )
}

export default App;