score:0
issue
you are rendering the routes and the links to them into two separate routing contexts. only a single routing context is necessary for the entire react application.
also, you likely don't need both a hashrouter
and a browserrouter
. pick the one the suits your app's needs.
solution
render all the routes and links into a single routing context. lift the hashrouter
/browserrouter
up the reacttree such that only a single router is wrapping both the app
rendering the routes and the sidemenu
components.
example:
index.js
<browserrouter>
<sidemenu />
<app />
</browserrouter>
app
function app() {
return (
<div classname="app">
<switch>
<route path="/consultas">
<consultas />
</route>
<route path="/diagnosticos" component={diagnosticos} />
<route path="/noticias" component={noticias} />
<route path="/configs" component={configuracoes}/ >
<route path="/">
<home />
</route>
</switch>
</div>
);
}
export default app;
sidemenu
function sidemenu() {
return (
<div id="sidemenu">
<img src={require('./hwbc.png')} alt="" />
<hr />
<h1>menu</h1>
<ul>
<li><navlink exact to="/">home</navlink></li>
<li><navlink to="/consultas">consultas</navlink></li>
<li><navlink to="/diagnosticos">diagnostiocos</navlink></li>
<li><navlink to="/noticias">noticias</navlink></li>
<li><navlink to="/configs">configuracoes</navlink></li>
</ul>
</div>
)
};
export default sidemenu;
Source: stackoverflow.com
Related Query
- React Route does not work - Single page app
- Bootstrap Navbar does not work in React JS for single page website
- My React 18 app does not reload automatically I try to click on the create new project button does not work unless I refresh the page manually
- React Router V4 - Page does not rerender on changed Route
- Why does my react app go to the custom 404 not found page when the link is clicked?
- React Route does not work with nested URLs
- window.location does not work with react app using react router 4
- Tailwind CSS does not work with React App
- `window.location.href` does not work on react app when deploying on github pages
- React router Redirect does not work when route comes from another component
- JS code works when i paste it on console, but does not work inside my React App
- Create React App PWA ERROR: Does not register a service worker that controls page and start_url
- Why does my React app work locally but not on Azure?
- react router changing to current page with different params does not work
- child route not working in single spa react app
- Calling API via redux in react app does not work
- history.push() does not work on the same page using react
- Event listener for button does not work unless page is refreshed in React
- React Firebase app auth service does not work in production
- socket connect event inside useEffect does not work when component is created but works after refreshing the page in React
- not work nested route react app(when page refresh) , after depoly on netlify
- Multiple level nested routing does not work in react app
- Sticky position left does not work in React app
- React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS
- Maxlength does not work React Js
- React css transition does not work correctly
- Does React.js require app to be a single page
- WebStorm auto completion does not work for React js
- structure of a Backbone and React single page app
- React native buttons OnPress does not fire when app running in debug mode
More Query from same tag
- React-Router: Why is the useHistory undefined in react?
- How to update nested object in redux or redux-toolkit?
- state is not incrementing correctly reactjs
- google-maps-react get marker position on drag end
- Show editable data with textarea
- Sticky content scrolling up into fixed menu header Semantic UI
- React - Use react hooks, set an array state in useEffect and watch it cause Infinite loop?
- Dog API breeds return undefined 404 error React.js
- React Router - How to IndexRedirect to dynamic route
- React set state property dynamically
- Babel-loaders module not found in npm start with react js
- send the value as string when selecting the option
- Passing methods as props from embeded component to be called by parent
- display icon based on file type
- Object is possibly 'undefined' in reference to paragraph HTML element
- Error with npm install semantic-ui-react semantic-ui-css using React
- How to implement function addTodo in a todo app?
- Input fields not getting updated
- Apply forEach function for array like object
- FirebaseError: Function Query.where() requires a valid third argument, but it was undefined
- How to pass arguments onClick of Button in react-admin?
- ReactJS not passing updated State
- react developer tool incorrect state
- How to implement react-i18next in a routes.js file
- Play HLS video from S3 using CookPete/react-player
- Callback Function Between Parent and Child Component
- React js map() undefined is not a function
- REACT Array True or False Inputs?
- React fetching from API error - let user know what is going on
- react history replace disallow back button