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);

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 plicated code

Thanks for every answer

• javascript
• node.js
• reactjs

• I would start with a react-router tutorial. – Max Commented Feb 13, 2019 at 19:50

2 Answers 2

You would most likely use a client-side navigation package such as React-Router to acplish 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 "ponent" 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="/" ponent={Home} />
      <Route path="/about" ponent={About} />
      <Route path="/topics" ponent={Topics} />
    </div>
  </Router>
);

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

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

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

and then rendered in React using .map():

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

I think you need to install react-router-dom. Second, please use template strings.