How do I go to different paths on my react website without getting "Cannot GET /path"?-CodePudding

I have a React website here: www.assertivesolutions.ca. At that site, you will be able to click the "About Us" link in the header and be taken to the About Us section where you will find a "Read More" button. You can click on the button to be taken to the Services page at www.assertivesolutions.ca/services.

All this works fine except when you enter "www.assertivesolutions.ca/services" directly in the URL. Then you get a Cannot GET /services message. This is what I need help with. I'd like to be able to get to the services page by entering it into the URL.

My index.js file is extremely simple:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

The App.js file looks like this:

import React, { Component } from 'react';
import './App.scss';
import './Home.scss';
import Header from './Header/Header';
import Banner from './Banner/Banner';
import Welcome from './Welcome/Welcome';
import MainFocus from './MainFocus/MainFocus';
import WhatWeDo from './WhatWeDo/WhatWeDo';
import OurBlog from './OurBlog/OurBlog';
import OurClients from './OurClients/OurClients';
import ContactUs from './ContactUs/ContactUs';
import Footer from './Footer/Footer';
import smoothscroll from 'smoothscroll-polyfill';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Blog from './Blog/blog';
import OurServices from './OurServices/OurServices';
import SideMenu from './SideMenu/SideMenu';

class App extends Component {

  render() {

    smoothscroll.polyfill();

    return (
      <Router>
        <Switch>
          <Route path="/" exact>
            <div className="app-master-container">
              <SideMenu pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
              <div className="header"><Header /></div>
              <Banner />
              <Welcome />
              <MainFocus />
              <WhatWeDo />
              <OurBlog />
              <OurClients />
              <ContactUs />
              <Footer />
            </div>
          </Route>
          <Route path="/blog">
            <Blog/>
          </Route>
          <Route path="/services">
            <OurServices/>
          </Route>
        </Switch>
      </Router>
    );
  }
}

export default App;

I'm not sure what else to show you as I have no idea what would be effecting the routing in this way. If you need more information, please ask and I'll do my best to post it.

Thanks

CodePudding user response：

try this

      <Route exact path="/blog">
        <Blog/>
      </Route>
      <Route exact path="/services">
        <OurServices/>
      </Route>

because I think it goes under <Route path="/" exact> when you enter it directly

CodePudding user response：

You need to write redirect rules for SPAs (requiring all requests to return index.html)

Example: If you deploy on Netlify, you need to create a _redirects file in public folder with this content below:

/*   /index.html   200