Creating dynamic Link with some text before it

Question

I was building a search engine for custom project.

There I have a search bar from where user can search.

When the user searches, I want the given link to work as it works in case of google

www.google.com/ search? queryRelatedInfo

Notice the search? and then whatever query/parameter/ID

for this I tried something like this in

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

Notice, <Route path ="/search?:id" above.

Unfortunately this didn't worked out.

I understand that <Route path ="/:id" works but how can i make <Route path ="/search?:id to work i.e how can I make some link like http://localhost:3000/search?9e9e to work

You realize there is a big difference between `/search/someID` and `/search?id=123`? For `/search/123`, '123' is sub route(path), and for `/search?id=123`, 'id=123' is query. I think in your case you should use sub route not query, `/search/9e93` not `/search?9e9e` — Kim, Jan 26 '19 at 15:00
Did you use historyApiFallback:true in webpack-dev-server config? — sdkcy, Jan 26 '19 at 15:33
please try it. if it work, i will give an answer for other people who has same issue. — sdkcy, Jan 26 '19 at 15:35

sdkcy · Answer 1 · 2019-01-26T16:31:58.533

1

I think this is related with historyApiFallback. That parameter; (https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback)

When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. devServer.historyApiFallback is disabled by default. Enable it by passing:

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

Your react app is a single page application. So all path except home path actually is an virtual path, they are not physically exist. The paths must routed to home path. So react-router can manage.

edited Jan 26 '19 at 16:31

answered Jan 26 '19 at 15:48

sdkcy

3,528
1
16
23

I don't have `devServer` in my `webpack.config` and `webpackDevServer.config`. It does have historyApiFallback which looks like this `historyApiFallback: { // Paths with dots should still use the history fallback. // See https://github.com/facebook/create-react-app/issues/387. disableDotRule: true, },` but again there is no devServer so this isn't nested inside devServer. You can look more into configuration of my webpack here in react-scripts https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config – Alwaysblue Jan 26 '19 at 16:04
There are different implementations. Did you try to change `historyApiFallback: {disableDotRule: true}`to `historyApiFallback: true`` – sdkcy Jan 26 '19 at 16:30
in your link historyApiFallback.disableDotRule:true, but i said historyApiFallback:true – sdkcy Jan 26 '19 at 16:34

score 0 · Answer 2 · answered Jan 26 '19 at 20:21

you don't need to put the path like this /search?:id, just put it search

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

then inside your SearchScreen component, get the value of search parameter from the URL, check this issue will help.

after the user make search, pass the value like this /search?s=value_here

Creating dynamic Link with some text before it

2 Answers2