Question

我正在为自定义项目构建搜索引擎。

我有一个搜索栏，用户可以从中搜索。

当用户搜索时，我希望给定的链接能够在Google情况下正常工作

www.google.com/ 搜索？ queryRelatedInfo

注意搜索吗？然后是任何查询/参数/ ID

为此，我在

中尝试了类似的方法

import React, {Component} from 'react';
import { 
  BrowserRouter, 
  Route, 
  Switch,
  Redirect,
} from 'react-router-dom';
import SearchScreen from "./container/searchScreen.js"
import HomeScreen from "./container/home.js";


class route extends Component {
    render () {
        return (
            <BrowserRouter>
                <div>
                    <Switch>
                        <Route path ="/" exact render ={(props) => <HomeScreen {...props}/>} />
                        <Route path ="/search?:id"  exact render ={(props) => <SearchScreen {...props}/>} />
                    </Switch>
                </div>
            </BrowserRouter>
        )
    }
}

export default route

通知， <Route path ="/search?:id" 。

不幸的是，这没有解决。

我了解 <Route path ="/:id“ 可以工作，但是我如何使 <Route path ="/search?:id 可以工作，即如何建立类似的链接http://localhost:3000/search?9e9e 上班

Answer 1

我认为这与historyApiFallback有关。该参数；（https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback）

使用HTML5历史记录API时，可能必须提供index.html页面来代替任何404响应。 devServer.historyApiFallback默认情况下处于禁用状态。通过以下方式启用它：

module.exports = {
  //...
  devServer: {
    historyApiFallback: true
  }
};

您的React应用程序是一个单页应用程序。因此，除本地路径外的所有路径实际上都是虚拟路径，它们实际上并不存在。路径必须路由到主路径。因此react-router可以管理。

Answer 2

您无需放置这样的路径/search?:id，只需放置search

<Route path ="/search"  exact render ={(props) => <SearchScreen {...props}/>} />

然后在您的SearchScreen组件中，从URL获取搜索参数的值，检查this问题是否有帮助。

用户进行搜索后，传递像这样的值/search?s=value_here

创建带有动态链接的动态链接

2 个答案: