How to implement dynamic pages in React.js?

Question

import React, { Component } from "react";
import { FormattedMessage } from "react-intl";
import { connect } from "react-redux";

class Project extends Component {
  render() {
    return (
      <div
        className={
          "ih-item square effect6 from_top_and_bottom grid-item " +
          this.props.category +
          " " +
          this.props.widthClass
        }
      >
        <FormattedMessage id="route.project">
          {route => {
            return (
              <a href={"/" + route + this.props.url}>
                <div className="img">
                  <img src={this.props.mainImage} alt="img" />
                </div>
                <div className="info">
                  <h3>{this.props.header}</h3>
                  <p>{this.props.description}</p>
                </div>
              </a>
            );
          }}
        </FormattedMessage>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    projects: state.project.projects
  };
};

export default connect(
  mapStateToProps,
  {}
)(Project);

How to implement projects' pages and custom URL for every one. I suppose custom URLs have to be done with MongoDB, but how to implement it in reactjs. That is third day of my research, but mostly I found complicated code

Thanks for every answer

Answer 1

You would most likely use a client-side navigation package such as React-Router to accomplish this.

In order to set up a basic router, you need to define routes and views for those routes in the following fashion, where the "path" prop refers to your desired endpoint and "component" being the desired view:

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

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

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

These routes can also be dynamically-generated using an array of routes, such as the following (defined in your component state):

routes = [
  {
    path: "/",
    exact: true,
    component: Home
  },
  {
    path: "/bubblegum",
    component: () => <div>bubblegum!</div>,

  },
  {
    path: "/shoelaces",
   component: Shoelaces
  }

and then rendered in React using .map():

{this.state.routes.map(route => (
  <Route exact={route.exact||false} path={route.path} component={route.component} />
))}