如何根据搜索结果创建网站端点？答案

【问题标题】：How to create website endpoints based on search results?如何根据搜索结果创建网站端点？
【发布时间】：2020-04-28 16:15:33
【问题描述】：

我正在构建一个 ReactJS 网站，作为 Web 开发训练营项目的一部分。

我使用 reactjs 端点 (../Language.js) 和我的 Sqlite3 数据库之间的烧瓶路由创建了一个搜索功能。

http://localhost:3000/kanjisearch

但是，我如何将搜索结果放入端点本身？例如，如果用户搜索“德语动词”，浏览器会显示如下内容：

http://localhost:3000/kanjisearch?=german+verbs

我希望这样当用户点击浏览器上的前进或后退箭头时，它会将用户带到上一个搜索，而不是他们所在的上一个页面。

我可以这样做是 react/javascript 吗？还有什么？谢谢。

【问题讨论】：

标签： javascript html reactjs web flask

【解决方案1】：

是的，您可以使用react-router-dom 库只需执行 yarn add react-router-dom 并创建一个 route.js 文件并执行以下操作

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

import someScreen from "../somewhere" // this would be your Screen that you wanna show

const Routes = () => {
    return (
      <Router>
            <Switch>
              <Route path="/container/language/:language" component={someScreen} />
            </Switch>
      </Router>
    );
  };

export default Routes;

之后，您必须按以下方式修复您的 app.js 文件

import React from 'react';
import './App.css';
import Routes from './router '; //the location of your router

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Routes/>
      </header>
    </div>
  );
}

export default App;

转到您的组件并执行export default withRouter(someScreen)

在你的屏幕中因为你现在有一个连接的类（到路由）你可以在你的 props 中访问 match，这个 props 是由 react-router 创建的，并且包含关于这个路由匹配的信息：例如 match.params。语言将包含路线中的 :language，这意味着如果你有 /german+verbs

现在您可以使用http://localhost:3000/container/language/german+verbs 之类的网址，然后使用德语+动词

您的参数将作为

传递给您的组件

match.params = {
    language: 'language+verbs'
}

在你的 compDidMount 方法中使用它

【讨论】：

【解决方案2】：

嗯...你想使用什么语言？ :-) 。你可以在你提到的任何一个中做到这一点。

由于您首先提到了 ReactJS，因此您可以使用 window.location 对象在 javascript 中执行此操作。只需设置并读取哈希。顺便说一句，哈希可以是任何东西，并且会被浏览器忽略，但您的 JS 可以查看它。您的网址看起来像这样：

http://localhost:3000/container/language/Language#search=german+verbs.

【讨论】：