How to navigate to a new page in react?

Question

I started to create my own React app so I could learn better. I want to click on and it will bring me to the About.js render. About.js is an entirely new page and new design. Sort of like in HTML. About.js will have a whole new design but I'm not sure on how to go about this. I've used react-router but when i click on , it will not jump to another page. About.js will just render on App.js.

//App.js

const styles= {
  backgroundColor: '#86e1f7', 
  transition: 'all 0.2s ease-in',
  opacity: .75
}

class App extends Component {
  render() {
    return (
      <div className='mainCat' >
        <Category style={{width: '25%', height: '100%'}} 
            title='ABOUT' background={AboutImage} position='-73px 0'/>

        <Category style={{width: '25%', height: '100%'}} 
            title='BLOG' background={BlogImage} position='-300px 0'/>

        <Category style={{width: '25%', height: '100%'}} 
            title='CONTACT' background={ContactImage} position='-30px 0'/>
      </div>

    );
  }
}

class Category extends Component {
  constructor(){
    super();
    this.state= {
        height: 0,
        marginTop: 500,
        visibility: 'hidden'
    }
    this.handleMouseOver = this.handleMouseOver.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  handleMouseOver() {
    this.setState({
      height: 50,
      marginTop: 450,
      visibility: 'visible' 
    });
  }

  handleMouseLeave() {
    this.setState({
      height: 0,
      marginTop: 500,
      visibility: 'hidden' 
    });
  }

    render() {
      return(
        <div className='catName' style={{...this.props.style, background: `url(${this.props.background}) ${this.props.position} white no-repeat`,  backgroundSize: 'cover', overflow: 'hidden'}} 
              onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave}>
            <div style={{...styles, height: this.state.height, marginTop: this.state.marginTop, visibility: this.state.visibility}}>
                <h2 className='catTitle'>{this.props.title}</h2>
            </div>
        </div>
      );
    }
}

//About.js

export class About extends Component {
    render() {
        return(
            <div>About page</div>
        );
    }
} 

Answer 1

You may use react-router

here is an example from the docs:

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Index = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Users = () => <h2>Users</h2>;

const AppRouter = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about/">About</Link>
          </li>
          <li>
            <Link to="/users/">Users</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Index} />
      <Route path="/about/" component={About} />
      <Route path="/users/" component={Users} />
    </div>
  </Router>
);

export default AppRouter;

Example: Nested Routing

This example shows how nested routing works. The route /topics loads the Topics component, which renders any further 's conditionally on the paths :id value.import React from "react";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const App = () => (
  <Router>
    <div>
      <Header />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Topic = ({ match }) => <h3>Requested Param: {match.params.id}</h3>;
const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>

    <ul>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
      </li>
    </ul>

    <Route path={`${match.path}/:id`} component={Topic} />
    <Route
      exact
      path={match.path}
      render={() => <h3>Please select a topic.</h3>}
    />
  </div>
);
const Header = () => (
  <ul>
    <li>
      <Link to="/">Home</Link>
    </li>
    <li>
      <Link to="/about">About</Link>
    </li>
    <li>
      <Link to="/topics">Topics</Link>
    </li>
  </ul>
);

export default App;

Here is the link of the library documentation : react-router