Why won't my React application work with my Apache .htaccess file to prevent 404s?-CodePudding

I'm using React 16.12.0 with Apache 2.4. I don't seem to be able to visit a URL by just typing in the browser even though I can navigate to one. I have this set up in my App.js file ...

      <div className="auth-wrapper">
        <div className="auth-inner">
          <Switch>
            <Route exact path="/" component={Map} />
            <Route path="/add" component={Add} />
            <Route path="/edit/:id" component={Edit} />
            <Route path="/search" component={Search} />
            <Route path="/nocoords" component={NoCoordsSearch} />
            <Route
              path="/directory-additions-updates/:id"
              component={DirectoryAddUpdate}
            />
            <Route
              path="/directory-additions-updates/"
              component={DirectoryAddUpdate}
            />
            <Route path="/:coop_id/people" component={AddPerson} />
            <Route path="/person/:id/edit" component={EditPerson} />
            <Route path="/:coop_id/listpeople" component={ListPeople} />
          </Switch>
        </div>
      </div>

and I have created this .htaccess file

cat /var/www/html/client/.htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

However, although I can navigate to URLs like "/search", when I type that in the browser bar, or click "Refresh" when on that page, I get a 404. What else do I need to do to configure my application so I can visit a URL by typing into it?

CodePudding user response：

A couple of things went wrong. My .htaccess file was not in the same directory as my "index.html" file, so that had to move.

Second, needed to add this into my Apache virtual configuration

    <Directory "/var/www/html/client/build/">
      Options Indexes FollowSymLinks
      AllowOverride all
    </Directory>

where /var/www/html/client/build/ is the directory containing the index.html file.