Redirect all url with # from HashRouter to BrowserRouter

Paw — Sat, 27 Jun 2020 10:07:18 +0000

I changed HashRouter to BrowserRouter and now I would like to redirect all urls to remove # from them. (Url are in e.g. mailing - so I have to do it).

I found a similar topic to this, but none of the solutions there works for me.

import { BrowserRouter } from 'react-router-dom'

class Index extends Component {

    render() {

        return (
<BrowserRouter>
  <Switch>
    <Route exact path={"/"} component={() => <HomePage />}/>
    <Redirect from='/#/bus/:category' to '/bus/:category' />
    <Route exact path='/bus/:category' component={BusCategory} />
  </Switch>
</BrowserRouter>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

It's redirecting only to HomePage.

Next solution also not working:

import { BrowserRouter } from 'react-router-dom'

class Index extends Component {

    render() {


 const history = useHistory()

  if (location.hash.startsWith('#/')) {
    history.push(location.hash.replace('#', '')) // or history.replace
  }

        return (
<BrowserRouter>
  <Switch>
    <Route exact path={"/"} component={() => <HomePage />}/>
    <Route exact path='/bus/:category' component={BusCategory} />
  </Switch>
</BrowserRouter>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

and the last one also nothning :(

import { BrowserRouter } from 'react-router-dom'

class Index extends Component {

    render() {

        return (
<BrowserRouter>
  <Switch>
    <Route exact path={"/"} component={() => <HomePage />}/>
    <Route exact path='/bus/:category' component={BusCategory} />
    <Route path={"/bus/:category"} render={({ location }) => <Redirect strict to={location.hash.replace('#', '')} />} />

  </Switch>
</BrowserRouter>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

I've probably already tried all the options, if anyone can help me I'll be extremely grateful.

Filter Search in React, how to do 'nothing was found'

Paw — Tue, 16 Jun 2020 15:03:02 +0000

Hi everyone! I'm sorry for my very poor english. :(

I have a problem creating a condition that would inform users that nothing was found. I have already tried by all means until I finally gave up and write to you asking for help.



import React, {Component} from "react";
import {Link} from "react-router-dom";

class SearchCars extends Component{

    const allCars = [
        {name: CarA, vin: exampleVin1},
        {name: CarB, vin: exampleVin2}
    ]

    state = {
        filterText: '',
        showSearch: false
    };

    handleSearch = e => {
        this.setState({
            filterText: e.target.value.toLowerCase()
        })
    };

    handleShowSearch = e => {
        this.setState({
            showSearch: !this.state.showSearch,
            filterText: ''
        })
    };

    render() {
        let table = [];
        let lastCategory = null;

        allCars.filter( el => {
            if (el.name.toLowerCase().indexOf(this.state.filterText) === -1){
                return null;
            }
            if (el.vin !== lastCategory){
                table.push(
                    <a className='search_items_links' onClick={()=> {this.handleShowSearch();}} key={el.vin} >
                        <div className='search_items'>{el.name}</div>
                    </a>
                )
            }

            lastCategory = el.vin;
        });

        let addClassSearch = this.state.filterText.length > 0 ? "search search_active" : "search";
        let toggleClassX = this.state.filterText.length > 0 ? "search_close search_close_active" : "search_close";

        if (this.state.showSearch === true){
            return (
                <>
                    <div className={addClassSearch}>
                        <input autoFocus
                               type='text'
                               placeholder='search'
                               value={this.state.filterText}
                               onChange={this.handleSearch}
                        />
                        <div onClick={this.handleShowSearch} className={toggleClassX}>
                            <img src='../images/close.png'/>
                        </div>
                        <div className='search_list'>
                            {
                                this.state.filterText.length === 1 && <a className='search_items_links'><div className='search_items'>Too short...</div></a> ||
                                this.state.filterText.length > 1 && table
                            }
                        </div>
                    </div>
                </>
            )
        } else{
            return (
                <div className='search_icon_display'>
                    <div className='search_zoom-icon'><img onClick={this.handleShowSearch}
                                                           onMouseEnter={this.hoverIcon}
                                                           onMouseOut={this.hoverIcon}
                                                           src={this.state.hoverIcon ? '../images/search-icon_hover.png' : '../images/search-icon.png'}/></div>
                </div>

            )
        }


    }
}

DEV Community: Paw

Redirect all url with # from HashRouter to BrowserRouter

Filter Search in React, how to do 'nothing was found'