如何在 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-dom 。 其次，請使用模板字符串。

Answer 2

您很可能會使用諸如React-Router 之類的客戶端導航包來完成此操作。

為了設置基本路由器，您需要以下列方式為這些路由定義路由和視圖，其中“路徑”屬性指的是所需的端點，而“組件”是所需的視圖：

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} />
))}

Answer 3

除了 Gabor 的回答之外，這里有一篇不錯的文章可以查看。 https://dev.to/dsckiitdev/dynamic-pages-using-react-router-2pm