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

如何为每个项目实现页面和自定义 URL。我想自定义 URL 必须用 MongoDB 来完成，但是如何在 reactjs 中实现它。那是我研究的第三天，但主要是我发现了复杂的代码

谢谢大家的回答

Answer 1

您很可能会使用客户端导航包，例如 React-Router来完成这个。

为了设置一个基本的路由器，您需要按照以下方式为这些路由定义路由和 View ，其中“路径”属性指的是您所需的端点，“组件”是所需的 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>
);

这些路由也可以使用路由数组动态生成，例如以下(在您的组件状态中定义):

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

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

然后使用 .map() 在 React 中渲染:

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