CODEWITHSUNDEEP
reactjsreact-router-dom
Genetic1989
Genetic1989

Reputation: 634

How to get react-router up and running?

I have a simple react-router-dom set and the links just simply won't work. My code is as follows:

index.js:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import "./containers/index.css";
import App from "./containers/App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
    <Router>
      <App />
    </Router>
  ,document.getElementById("root")
);

app.js:

import "./App.css";
import { Switch, Route } from "react-router-dom";
import Homepage from "../containers/Homepage";
import About from "../containers/Homepage";
import Contact from "../containers/Homepage";
import Registration from "../containers/Homepage";
import Services from "../containers/Homepage";
import Schedule from "../containers/Homepage";
import Gallery from "../containers/Homepage";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";

const App = () => {
  return (
    <div className="App">
      <Navbar />
      <Footer />
      <Switch>
        <Route exact path="/" component={Homepage} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/registration" component={Registration} />
        <Route path="/services" component={Services} />
        <Route path="/schedule" component={Schedule} />
        <Route path="/gallery" component={Gallery} />
      </Switch>
    </div>
  );
}

export default App;

Homepage.js:

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

const Homepage = () => (
  <div>
    <h2>Homepage</h2>
    <Link to="/about"> About </Link>
  </div>
);

export default Homepage;

About.js

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

const About = () => (
  <div>
    <h2>About</h2>
    <Link to="/"> Home </Link>
  </div>
);

export default About;

All other components are simple dummy components, similar to about and homepage. Just trying to get the routing to work before proceeding.

What am I missing?

Upvotes: 1

Views: 45

Answers (1)

Nicholas Bergesen
Nicholas Bergesen

Reputation: 382

import "./App.css";
import { Switch, Route } from "react-router-dom";
import Homepage from "../containers/Homepage";
import About from "../containers/Homepage";
import Contact from "../containers/Homepage";
import Registration from "../containers/Homepage";
import Services from "../containers/Homepage";
import Schedule from "../containers/Homepage";
import Gallery from "../containers/Homepage";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";

I think you could have a copy-paste error, your "About" has been imported as Homepage. "import About from "../containers/Homepage";"

Upvotes: 1

Related Questions