Reactjs Routing not navigating

0
votes

I currently have a react app I am working on and the routing is buggy. I have set up react applications and their routings like this before but when trying to route to the "details" component, only the url changes, but the component does not load. An extra pair of eyes would be nice to see what I'm missing. I have the routes set up as:

  1. index.js:

    import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { Router } from "react-router-dom"; import { createBrowserHistory } from "history";

    const history = createBrowserHistory();

    const render = () => { ReactDOM.render( , document.getElementById('root'), ); };

    render();

  2. App.js:

    import React from 'react'; import {Route, Switch} from 'react-router-dom'; import { BreweryPage } from './route.js';

    function App() { return ( <> </> ); }

    export default App;

  3. route.js

    import React from 'react'; import PropTypes from 'prop-types'; import { Route, Switch, withRouter } from 'react-router-dom'; import { BreweryPage, BreweryDetailPage } from './pages'; import {AppContainer} from "../../common/header";

    const BreweryHomePage = ({ match }) => ( <Route exact path={${match.url}} component={BreweryPage} /> <Route exact path={${match.url}/details/:breweryid} component={BreweryDetailPage} /> );

    BreweryHomePage.propTypes = { match: PropTypes.shape({ url: PropTypes.string, }), };

    BreweryHomePage.defaultProps = { match: { url: '', }, };

    export default withRouter(BreweryHomePage);

The root "/" path component loads, but I can't get the details components component to render when routing with history.push(path) using const history = useHistory();.

javascriptreactjsroutes