CODEWITHSUNDEEP
javascriptreactjsfrontend
hjpomhbj
hjpomhbj

Reputation: 17

Navbar is not displayed in react

import React from 'react';
import { NavLink, withRouter } from 'react-router-dom';
import './style.css';



const NavBar = ({ history }) => {
   return (
     <nav>
        <NavLink className="home-link" to="/">Home</NavLink>
        <NavLink activeClassName="active" to="/about">About</NavLink>
        <NavLink activeClassName="active" to="/search">Search</NavLink>
        <button>Back</button>
    </nav>
 );
}

export default NavBar;

and this is the app component:

 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { NavBar, SearchForm } from './components';
 import { Welcome, Search ,About} from './pages'
 import { BrowserRouter as Router, Switch, Route, Link } from 'react- 
router-dom';

const PageNotFound = () => (
   <div> 404</div>
)

// function App() {
  class App extends Component {
     render () {
   return (

     <div id="app">
        <header>
        <NavBar />
        </header>
         <main>
             <Switch>
                <Route  exact path="/" component={Welcome}/>
                <Route path="/about" component={About} />
                <Route path="/search" component={Search} />

            </Switch> 
             <SearchForm/>
        </main>
    </div>
   )
}
}

export default App;

when I npm start my application, it does not show the the navbar, I am missing something? I've imported the navbar component into my App.js file, and ive tried following tutorials online but to no avail.

the index.js file in my component file

export { default as NavBar } from './NavBar';
export { default as SearchForm } from './SearchForm';
export { default as Result } from './Result';

Upvotes: 0

Views: 110

Answers (2)

Tushar Khatiwada
Tushar Khatiwada

Reputation: 2027

First you haven't used Router component to wrap your routes and you have imported them twice. Second please look into developer consoles for debugging.

Your App component should look like this:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { NavBar, SearchForm } from "./components";
import { Welcome, Search, About } from "./pages";

const PageNotFound = () => <div> 404</div>;

class App extends React.Component {
  render() {
    return (
      <div id="app">
        <Router>
          <header>
            <NavBar />
          </header>
          <main>
            <Switch>
              <Route exact path="/" component={Welcome} />
              <Route path="/about" component={About} />
              <Route path="/search" component={Search} />
            </Switch>
            <SearchForm />
          </main>
        </Router>
      </div>
    );
  }
}

export default App;

Upvotes: 0

dev.artisanbiz
dev.artisanbiz

Reputation: 56

Please try to define a layout. It maybe looks as follows.

MainLayout = ({children}) => {
   return (
    <div id="app">
        <header>
        <NavBar />
        </header>
         <main>
             {children}
             <SearchForm/>
        </main>
        </div>
   )
}

And just define the router like this

<MainLayout>
    <Switch>...
</MainLayout>

Upvotes: 2

Related Questions