如何在React中使用URL创建页面

编程问答 2022-06-12

问题描述

应用程序正在从服务器接收HTML文件。

此数据（responsetoPost）可以显示在这样的页面上：

<div dangerouslySetInnerHTML={{ __html: this.state.responsetoPost }} />

我想知道是否可以在其中显示此数据的地方创建一个新URL？

html文件具有以下格式：

<hr />
<p>title: "my-title"</p>
<h2 id="123">a....

，我希望创建的页面像localhost:3000/my-title并在该页面上显示HTML。

有可能吗？我应该使用哪种方法？

解决方法

这与反应路由器完全一样。

您需要将npm依赖项引入到您的项目中，然后可以将路线my-title设置为<Route>，然后在该页面上渲染任何内容，以您的responseToPost为例。

显然，设置过程比声明<Route>还需要一些步骤，但是官方文档非常好：React Router official doc

,

您可以使用React Router。我建议为此使用一条特殊的路线，例如/pages/（简化代码）：


// On your Routes (usually App.js) page:
import { BrowserRouter as Router,Route } from "react-router-dom";

<Router>
  <Route path="/pages/:pageslug" component={Page} />
</Router>

const PAGES = {
  'my-title': "<div>...</div>"
};

// Page.js
export function Page({ match }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: PAGES[match.params.pageslug] }} />  
  );
}
dangerouslysetinnerhtmldangerouslysetinnerhtmlhtmljavascriptreactjsreactjsreactjsreactjs