Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Linking to other components with react-router

I'm very new to React and I'm trying to use react-router to navigate to new components. Before, the website was static HTML and CSS, so it was easy to navigate between the html files, however, I'm a bit confused since making the switch and updating the website with React.

I've been following two tuts:

  1. https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
  2. https://www.youtube.com/watch?v=1iAG6h9ff5s&index=6&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b

Now I have a simple about page component that I'm trying to render upon clicking the 'about' link on the footer of the page. So what currently happens is when I click on the about link on the footer it goes from localhost:3000/#/react to localhost:3000/#/about but nothing changes on the page. It's showing the index/home page still but I want it to show the about content.

Here's my code:

Components folder contains About.js, Footer.js and the pages folder contains App.js, Index.js

About.js:

import React from 'react';

const About = function() {
  return (
    <div>
      <h1 className="container-headers">- Our Mission and Vision -</h1>
      <p>
        Blah, blah.. this going to work?
      </p>
    </div>
  )
}

export default About;

Footer.js

import React from 'react';
import Logo from '../img/footer-logo.png';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { Link } from 'react-router-dom';


const Footer = function() {
  return (
    <div className="container-fluid twenty-padding-top">
      <div className="row">

        <div className="col-lg-4 col-sm-12 sixty-bottom-margin">
          <ul className="contact">
            <span className="margin-top-twentypx">Menu</span>

            <li>
              <Link to="about">About</Link>
            </li>

            <li>
              <a href="about.html">Provider Login</a>
            </li>

            <li>
              <a href="#">Blog</a>
            </li>
          </ul>
        </div>

      </div>
    </div>
  )
}

export default Footer;

App.js

import React, { Component } from 'react';
import './App.css';
import Services from './components/Services';
import Navbar from './components/Navbar';
import HowItWorks from './components/HowItWorks';
import BitIcons from './components/BitIcons';
import Footer from './components/Footer';
import Banner from './components/Banner';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
        <Banner />
        <Services />
        <HowItWorks />
        <BitIcons />
        <Footer />
      </div>
    );
  }
}

export default App;

And lastly, index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import registerServiceWorker from './registerServiceWorker';

import { Switch, HashRouter, Route, Link } from 'react-router-dom';

const app = document.getElementById('root');

const About = () => (
  <Switch>
    <Route exact path='/about' component={About} />
  </Switch>
)

const Main = () => (
  <Main>
    <Switch>
      <Route exact path='/about' component={About} />
    </Switch>
  </Main>
)

const Header = () => (
  <header>
    <nav>
      <ul>
        <li><Link to='/about'>About</Link></li>
      </ul>
    </nav>
  </header>
)

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
app);

registerServiceWorker();

Does anyone know what the problem is and how I can essentially 'hide' the index/home main landing page and show the about content instead?

Thanks!

like image 326
mur7ay Avatar asked Oct 30 '25 18:10

mur7ay


1 Answers

Here is how you can do the desired, simple setup that you want:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

const Landing = () => (
  <div>
    <h3>This is landing page with Foo and Bar</h3>
    <Foo />
    <Bar />
  </div>
)
const Foo = () => <div>This is component Foo.</div>;
const Bar = () => <div>This is component Bar.</div>;
const About = () => <div>This is component About.</div>;
const Header = () => (
  <div style={{height: "30px", background: "gray"}}>Header | 
  <Link to="/about"> Go to about</Link>
  </div>
);
const Footer = () => (
  <div style={{ height: "30px", background: "gray" }}>Footer |
  <Link to="/about"> Go to about</Link>
  </div>
);

const NotFound = () => <div>Not found</div>

class App extends React.Component {
  render() {
    return (
      <div>
      <BrowserRouter>
        <div>
            <Header />
            <Switch>
              <Route exact path="/" component={Landing} />
              <Route path="/about" component={About} />
              <Route component={NotFound} />
            </Switch>
            <Footer />
        </div>
      </BrowserRouter>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
like image 65
devserkan Avatar answered Nov 01 '25 09:11

devserkan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!