TransWikia.com

Bluehost hosted React pages not found

Stack Overflow Asked by Paul Lindberg on November 10, 2021

Currently I’m making a website using React and Bluehost under the domain paulmlindberg. http://paulmlindberg.com/portfolio/

The homepage works but none of the other tabs work; when you click on them they take you to a ‘page cannot be found’ WordPress page (redirecting this to my NoMatch page is also an issue I have to fix).
The links work fine when I host it locally.

First I followed this tutorial here: https://www.youtube.com/watch?v=tOK9l5uP06U

And then followed this tutorial to run it on bluehost: https://prolevelprogramming.com/how-to-host-react-web-app-bluehost/

I edited package.json to include "homepage": "http://paulmlindberg.com/portfolio/", then edited the following pieces of code to include the portfolio directory:

components/NavigationBar.js:


export const NavigationBar = () => (
    <Styles>
        <Navbar expand="lg">
            <Navbar.Brand href="/portfolio/">Saturn Surfer</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav"/>
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                    <Nav.Item><Nav.Link href="/portfolio/">Home</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/portfolio/about">About</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/portfolio/contact">Contact</Nav.Link></Nav.Item>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    </Styles>

)

App.js:


class App extends Component {
  render() {
    return (
        <React.Fragment>
            <NavigationBar />
            <Jumbotron />
            <Layout>
                <Router>
                    <Switch>a
                        <Route exact path="/portfolio/" component={Home} />
                        <Route path="/portfolio/about" component={About} />
                        <Route path="/portfolio/contact" component={Contact} />
                        <Route component={NoMatch} />
                    </Switch>
                </Router>
            </Layout>
        </React.Fragment>
    );
  }
}

Any advice or help is appreciated, thanks!

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP