CODEWITHSUNDEEP
javascriptcssreactjsreact-routerjsx
jibjab3344
jibjab3344

Reputation: 69

Why isn't my navigation bar rendering in React?

This is the code I have, I believe I have imported everything correctly, I am using React mdl to style it and copied and pasted the navbar code. I also installed react dom router correctly, the individual pages display but the navbar itself doesn't on the landing page. Can anyone help me? Thanks

App.js

import React, { Component } from "react";
import "./App.css";
import { Layout, Header, Navigation, Drawer, Content } from "react-mdl";
import Earth from "./earth.jpg";
import Main from "./components/main";
import { Link } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div style={{ height: "300px", position: "relative" }}>
        <Layout style={{ background: "src{Earth} center / cover" }}>
          <Header transparent title="Title" style={{ color: "white" }}>
            <Navigation>
              <a href="/aboutme">Link</a>
              <a href="/projects">Link</a>
              <a href="/resume">Link</a>
              <a href="/contact">Link</a>
            </Navigation>
          </Header>
          <Drawer title="Title">
            <Navigation>
              <Link to="/aboutme">About Us</Link>
              <Link to="/projects">Projects</Link>
              <Link to="/resume">Resume</Link>
              <Link to="/contact">Contact</Link>
            </Navigation>
          </Drawer>
          <Content>
            <div className="page-content">
              <Main />
            </div>
          </Content>
        </Layout>
      </div>
    );
  }
}

export default App;

main.js 

import React from 'react';
import { Switch, Route} from 'react-router-dom';
import LandingPage from './landingpage';
import AboutMe from './aboutme';
import Contact from './contact';
import Projects from './projects';
import Resume from './resume';


const Main = () => (
  <Switch>
    <Route exact path="/" component = {LandingPage} />
    <Route path="/aboutme" component = {AboutMe} />
    <Route path="/contact" component = {Contact} />
    <Route path="/projects" component = {Projects} />
    <Route path="/resume" component = {Resume} />
  </Switch>
)

export default Main;

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material.js';
import { BrowserRouter } from 'react-router-dom';

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

Upvotes: 0

Views: 808

Answers (1)

SuleymanSah
SuleymanSah

Reputation: 17868

You need to wrap your App component with BrowserRouter from react-router-dom.

You can do this inside you App component, or better in index.js like this:

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, rootElement);

Codesandbox:

https://codesandbox.io/s/so-react-router-uc8dr

Upvotes: 1

Related Questions