Javascript 使用搜索结果为url添加书签_Javascript_Reactjs_Typescript_Search

Javascript 使用搜索结果为url添加书签

javascript reactjs typescript search

Javascript 使用搜索结果为url添加书签,javascript,reactjs,typescript,search,Javascript,Reactjs,Typescript,Search,方法：搜索栏： onSearch(searchString) { if (this.props.history) { this.props.history.push( "/details?search=" + encodeURIComponent(searchString) ); } } { 如果（event.key==“输入”）{ this.onSearch（event.target.value）； } }}

方法：

搜索栏：

onSearch(searchString) {
    if (this.props.history) {
      this.props.history.push(
        "/details?search=" + encodeURIComponent(searchString)
      );
    }
  }

{
如果（event.key==“输入”）{
this.onSearch（event.target.value）；
}
}}
/>

onSearch方法打开此url:http://localhost:3000/marketPlace/details?search=iphone并使用“iphone”显示所有结果。我想要的是，每当用户将此url添加到书签时，他都应该返回到同一页面，搜索结果为iphone。我不知道该怎么做，有人能帮我吗？假设您正在编写客户端应用程序，并且不需要在服务器端呈现搜索结果，React Router（npm

React Router dom

）将允许您根据请求的url重新创建应用程序的特定状态

您应该能够按照React router文档将路由器应用于现有应用程序：

下面是一个非常简单的路由器示例，它与您的用例类似

示例显示：

对
```
/
```
的请求将呈现“主页”组件
对
```
/search？term=iphone
```
的请求将呈现“SearchResults”组件，并且
```
此内容。searchTerm
```
将等于字符串
```
iphone
```
```
SearchResults
```
组件解析url中的查询字符串并标识搜索词。在本例中，这只是显示给最终用户，但您可以使用它来获取搜索结果，例如使用
```
fetch（）
```

您可以使用两个文件再现该示例：

index.js

从“React”导入React；
从“react dom”导入react dom；
进口{
BrowserRouter作为路由器，
转换
路线
}从“反应路由器dom”；
类SearchResults扩展了React.Component{
建造师（道具）{
超级（道具）；
让queryString=newURLSearchParams（props.location.search）；
this.searchTerm=queryString.get（'term'）；
}
render（）{
返回术语的搜索结果页面：{this.searchTerm}；
}
}
函数App（）{
返回(
主页
);
}
ReactDOM.render（，document.getElementById（'root'））；

index.html


反应应用程序

您的意思是，当您直接转到url时（通过在浏览器url栏中输入url并按enter键，即发出http请求），您希望应用程序以与使用onSearch方法导航到此路由相同的状态显示吗？这取决于应用程序的设置，但您可能需要查看React路由器。您可以使用它将应用程序的url与状态匹配，并指示应用程序根据url的内容加载特定的React组件。是的，当通过聊天或电子邮件共享此url时，用户希望登录到同一页面

<Search
                  onKeyPress={(event) => {
                    if (event.key === "Enter") {
                      this.onSearch(event.target.value);
                    }
                  }}
                />

import React from 'react';
import ReactDOM from 'react-dom';

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

class SearchResults extends React.Component {
  constructor(props) {
    super(props);
    let queryString = new URLSearchParams(props.location.search);
    this.searchTerm = queryString.get('term');
  }

  render() {
    return <p>Search results page for term: { this.searchTerm }</p>;
  }
}

function App() {

  return (
    <Router>
      <Switch>

        <Route path="/search" component={SearchResults} />

        <Route path="/">
          <p>Homepage</p>
        </Route>

      </Switch>
    </Router>
  );

}

ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>