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 (


         <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 />




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