What's wrong with my routing in my react application?-CodePudding

I have a React application that I just deployed to my server and now the routing isn't working as expected. I need some help figuring it out.

When running locally, this works:

<button className="welcome-buttons"
                          onClick={() => window.location.href = 'http://localhost:3000/services'}>
                            Read More &nbsp;<i className="fas fa-arrow-alt-circle-right"></i>
                        </button>

I would click on the button and it would route to http://localhost:3000/services. Then when I was ready to deploy, I changed this to http://www.assertivesolutions.ca/services, created a build and uploaded it to my server. I would go to my site (http://www.assertivesolutions.ca) and it would load fine, but when I clicked on the button, I get taken to a page that says Cannot GET /services.

I'm not sure why this is. Maybe I can't just replace localhost:3000 with www.assertivesolutions.ca in the code. But what is the right way to do it?

This is what I have in app.js

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;

On the server, I'm running node and bouncy to handle the routing to each website I host, like this:

const bouncy = require('bouncy');
const express = require('express');
const path = require('path');
const { create, engine } = require('express-handlebars');

bouncy(function(req, bounce) {
    const host = req.headers.host;
    console.log(`host=${host}`);
    if (host === 'shahspace.com' || host === 'www.shahspace.com') {
        if (req.url.includes('/music mixes/')) bounce(8002);
        else bounce(8000);
    }
    if (host === 'assertivesolutions.ca' || host === 'www.assertivesolutions.ca') bounce(8001);
    if (host === 'fmshahdesign.com' || host === 'www.fmshahdesign.ca') bounce(8003);
}).listen(80);

const fmsApp = express();
fmsApp
    .use(express.static(path.join(__dirname, 'fmshahdesign.com')))
    .listen(8003);

const assertSolApp = express();
assertSolApp
    .use(express.static(path.join(__dirname, 'assertivesolutions.ca')))
    .listen(8001);
    
const musicMixApp = express();
musicMixApp.engine('.hbs', engine({
    extname: 'hbs',
    defaultLayout: false
}));
musicMixApp.set('view engine', 'hbs');
musicMixApp.set('views', path.join(__dirname, 'shahspace.com/music mixes/views'));

/****** more code for handling music mix app ********/

In other words, all requests come in on port 80 where the node router is listen, and then it checks the host to see which website is being requested. That's where bouncy comes in. It bounces the request to the appropriate port corresponding to the requested website. assertivesolutions.ca is on port 8001 so it bounces it there. Each site has an app created with express which handles the request on the appropriate port.

This works as long as I go to www.assertivesolutions.ca but as soon as I go to www.assertivesolutions.ca/services, it get the Cannot GET /services message. I would create a services folder in the assertivesolutions.ca folder (where the assertSolApp directs requests to) but the contents were created by the build (which I would think should be able to handle requests for /services) so I don't think I should mess with that.

Can anyone see the problem? Thanks.

CodePudding user response：

You need to write the .htaccess file in the server root directory.

Check this link

CodePudding user response：

If you're not sure about your url . Instead of Redirect to Another Webpage with vanilla javascript you can use react router (which you're already using and it seems version 5 ) . Just add it to your component like this :

import { useHistory } from "react-router-dom";
..............
 let history = useHistory();     
<button className="welcome-buttons"
                      onClick={() =>  history.push("/services")}>
                        Read More &nbsp;<i className="fas fa-arrow-alt-circle-right"></i>
                    </button>