Создание динамической ссылки с текстом перед ним

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

вам не нужно указывать путь как этот /search?:id, просто поместите его search

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

, а затем внутри компонента SearchScreen получите значение параметра поиска из URLпроверьте , эта проблема поможет.

после того, как пользователь выполнит поиск, передайте значение, подобное этому /search?s=value_here

Answer 2

Я думаю, что это связано с historyApiFallback.Этот параметр;(https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback)

При использовании API истории HTML5 страница index.html, скорее всего, придется обслуживать вместо 404 ответов. По умолчанию devServer.historyApiFallback отключен. Включите его, передав:

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

Ваше приложение реакции является одностраничным приложением. Таким образом, все пути, за исключением домашнего пути, фактически являются виртуальными, они физически не существуют. Пути должны быть направлены к домашнему пути.-рутер может управлять.