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:
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();
App.js:
import React from 'react'; import {Route, Switch} from 'react-router-dom'; import { BreweryPage } from './route.js';
function App() { return ( <> </> ); }
export default App;
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();.
do it like this
1-index.js should like this:
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { BrowserRouter } from "react-router-dom"
const app = (
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
<React.StrictMode/>
)
ReactDOM.render(app, document.getElementById("root"))
you have to add BrowserRouter to be able to use navigation
2- you can use BreweryPage in App.js like this:
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import { BreweryPage } from './route.js';
function App() {
return (
<>
<BreweryPage/>
</>
);
}
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 { createBrowserHistory } from "history";
import {AppContainer} from "../../common/header";
const newHistory = createBrowserHistory();
const BreweryHomePage = (props) => (
<Router history={newHistory}>
<Switch>
<Route exact path="/" component={BreweryPage} />
<Route path="/details/:breweryid" component={BreweryDetailPage} />
</Switch>
</Router>
);
export default withRouter(BreweryHomePage);