I am using react-router-dom for navigation in my app. The app is running on a normal apache webhost. I have edited the .htaccess file like so

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

This is my code

class App extends Component {


  render() {

    return (

      <div>
      <Layout>
      <HashRouter>
        <div>
            <HeaderTop/>

            <Header/>
         <Route exact path="/contact" component={ContactUs}/>
         <Route exact path="/about" component={AboutUs}/>
         <Route path="/search" component={Search} />
         <Route exact path="/" component={Body}/>

{
    arr.map((item, i) => {


      return  <Route key={uuid()}  path={"/safaris/" + item.title.split(" ").join("_")} component={(props) => <SafariItemExpandedUrlNav {...props} routeData={item} />}/>
    })
  }


            <Footer />

        </div>
      </HashRouter>





      </Layout>


      </div>
    );
  }
}

All the routes except the ones am generating from the map function are working. The other routes, the ones am returning in the map function are displaying a blank page. What could be the issue?

0 Answers