时间戳

首页 > 解决方案 > 在它之前创建带有一些文本的动态链接

javascript - 在它之前创建带有一些文本的动态链接

问题描述

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

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

当用户搜索时，我希望给定的链接能像谷歌一样工作

www.google.com/搜索？查询相关信息

注意到搜索了吗？然后是任何查询/参数/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工作

标签： javascriptreactjsreact-router

解决方案

我认为这与historyApiFallback 有关。那个参数；( https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback )

使用 HTML5 History API 时，可能必须提供 index.html 页面来代替任何 404 响应。devServer.historyApiFallback 默认禁用。通过传递启用它：

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

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

推荐阅读