ReactJS How do you switch between pages in React?

Question

So coming from an Angular/AngularJS background, you have states, and each state is a separate page. E.g. in a social network you can have a state with your feed, a state with a

Answer 1

Another solution. Files index.js and product.js are in the directory src\pages. For more information watch video https://www.youtube.com/watch?v=hjR-ZveXBpQ.

file App.js

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";
import Products from "./pages"
import Product from "./pages/product"

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" ><Products /></Route>
        <Route path="/product"><Product /></Route>
      </Switch>
    </Router>
  );
}

export default App;

file index.js

import React from "react";
import {Link} from "react-router-dom";
const Products = () => {
  return (
    <div>
      <h3>Products</h3>
      <Link to="/product" >Go to product</Link>
    </div>
  );
};
export default Products;

file product.js

import React from "react";
const Product = () => {
  return (
    <div>
      <h3>Product !!!!!!</h3>
    </div>
  );
}
export default Product;

Answer 2

The problem you have mentioned can be adressed as how to deal with routing within app. For that please take a look at available solutions such as react-router.

Another way you can tackle this problem is by moving out rendering different pages logic to component with would then render page based on data passed as props. For that you can use plain, old JavaScript object.

Answer 3

I'd recommend you to check react-router to solve this situation

It easily allows you to create custom routes like this:

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

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

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

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <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.url}/:topicId`} component={Topic} />
    <Route
      exact
      path={match.url}
      render={() => <h3>Please select a topic.</h3>}
    />
  </div>
);

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
);

export default BasicExample;

For the documentation and other examples, like nested Routing, checkout this page.