Questions tagged [react-router-v4]
React Router - A complete routing library for React inspired by Ember's routing system
1,990
questions
1
vote
1
answer
36
views
Not able to .focus() on Link component using ref in react-router 4
I am using the Link component from react-router (v4). I am able to attach a ref to this component and console log the reference.
However, if I call linkRef.current.focus() I get the error:
linkRef....
0
votes
0
answers
57
views
how to support different react-router-dom versions with Webpack module federation
We have a host app with old react-router-dom version (react-router-dom:^4.3.1) and we are trying to integrate react micro-app with latest react-router-dom (react-router-dom:^6.7.0)
I tried different ...
2
votes
1
answer
497
views
Redux how to get updated store state in root component
My root App component looks like this:
class App extends Component {
render() {
const state = store.getState();
const { isAuthenticated } = state.auth;
return (
<Provider store=...
1
vote
1
answer
198
views
React Routing an Dynamic Page content display RRDV5 [duplicate]
I am relatively new to reactJS and i am trying to build a dashboard with react. At the moment i have built out several authentication routes/pages but i am faced with a challenge with regards to ...
2
votes
2
answers
8k
views
Error: useNavigate() may be used only in the context of a <Router> component
i am getting this error
uncaught Error: useNavigate() may be used only in the context of a <Router> component.
at invariant (bundle.js:36570:20)
at useNavigate (bundle.js:36914:35)
...
0
votes
1
answer
612
views
React Hook useEffect has missing dependencies: 'match.params.id' and 'match.params.type'. Either include them or remove the dependency array
Hey guys ı make movie app with movie database api. When route detail page ı am check the react router props match.params and fetching data with axios like that :
Router
<Route exact path="/:...
2
votes
1
answer
146
views
Best way to restrict page access?
I'm designing a website with a form component that redirects to a "failure" or "success" component based on whether the form submits without an error or not. Here is the code I'm ...
1
vote
1
answer
1k
views
Solutions to render a different header for one of my components in React
I'm making a web app that has a main header that is valid for all its pages and a second header that should be different for the Start page and only there. To be specific, the main header is just the ...
0
votes
2
answers
351
views
Scroll Restoration on page change doesn't fully scroll to top
Scroll restoration scrolls 8/10ths of the way up the page but not all the way. Not sure if my ScrollToTop component is flawed or if I'm using the route and switch tags incorrectly in the App ...
0
votes
0
answers
217
views
React Router ComponentDidMount Not Executing
I need to have the componentDidMount method to fire when the Router mounts a component so that a timeout can be started. This timeout eventually sets the state so it can't be initialized in any render ...
0
votes
1
answer
36
views
(Gatbsy-React) Dynamic Path: how persist pages dynamically created with API to be crawled by Google Bot, and visited directly by users
I have this big issue.
I have developed a Gatsby website for the car parts market.
The users can select car model and part type and receive a page with the parts for their specific car.
I have used ...
1
vote
0
answers
281
views
React-router redirect my routes in production mode
I've got this route configuration in my React App:
index.js
<BrowserRouter basename="/">
<App />
</BrowserRouter>
and
App.js
<Switch>
&...
0
votes
0
answers
35
views
when I go to the url that matches, component is not getting rendered react-routes
I go to the url that matches the path or a route and the component in not getting rendered. I also have wrapped every thing with BrowserRouter in index.js file as well. Can't figure out the problem ...
1
vote
1
answer
993
views
How to Make React Router Resolve within a nested path
I'm a little bit uncertain as to what might be wrong here.
I have a React router switch that is nested within another React Router switch as below
Switch in homepage.js file is as below
<Switch>
...
0
votes
1
answer
180
views
Is there an replacement Parameter for onChange in react Route v4
typescript -React Js : i try to use onChange Propriete but i get the following issue : No overload matched this call.
<HashRouter>
<Switch>
<Route
...
2
votes
3
answers
907
views
Await react router history.goBack
I want to navigate backwards after clicking a submit button in a form for which I used history.goBack but in case there is no previous page/history, i want to navigate to a screen with thank you ...
0
votes
1
answer
61
views
Cant send a value to another page in react
Apologies if this is rudimentary, but I am not able to do a fairly simple task. I have a page where I have data rendered from an API into the cards like divisions. Ex:
<div class="card bg-...
0
votes
1
answer
508
views
How to make a nested react router component load to a new page and not half-way down the page
I currently have a situation where I have my main parent routes/switch within my App.js file but within a route within the App.js file, I have another component that also has it's own <Router> ...
1
vote
0
answers
330
views
React NavLink: Capture dynamic Routes but onClick redirect to a specific route
My NavLink Route looks as follows:
<NavLink
key={element.id}
to={element.uri || '/'}
className={classes.NavBarElements}
activeStyle={element....
0
votes
0
answers
39
views
How can I render 4th stage react child components in 1st stage parent component's
I'm new to react and react routing. I'm building a website. and while routing, I'm facing some problems as my home component is rendered in the app components along with the topbar, navbar, footer, ...
0
votes
2
answers
618
views
React router Link doesn't redirect
Please see sandbox.
I'm having this code:
<Router history={createBrowserHistory()}>
<Switch>
<Route path="/items/:itemId">
<Item />
...
5
votes
3
answers
4k
views
react router preload data from multiple components with a single loader animation
I have an app that needs to feature a dynamic header, loading an external file from a fetch request.
Once a user logs in they are directed to a portal /portal. I have defined a layout as:
export const ...
0
votes
0
answers
350
views
History.push does not redirect when only the param changes but it changes the url in the browser
I have this route:
<PrivateRoute path="/profile/:user_id" exact component={GenericProfile} />;
This is the PrivateRoute component:
const PrivateRoute = ({ component: Component, ...
2
votes
1
answer
112
views
React Router Dom v4 Multiple Nested Routes On Home Activeclass
I need multiple nested routes in react-router-dom in home Page
--- Home
--- Page 1
--- Page 2
--- About
I have home page that contains two subs the active class will be worked based the path Home/...
0
votes
1
answer
152
views
Why Route does not change after async function call in react
I have a code pattern that I know is not going to work but I am not able to reason it out.
const MyComponent=()=>{
const history = useHistory();
function sleep(ms) {
return new Promise(...
2
votes
0
answers
79
views
Error: Element type is invalid: expected a string (for built-in components) or a class/function in case of server side rendering with react
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it'...
1
vote
2
answers
109
views
Regarding React router dom
Hope you are doing good. I have one question regarding react routing. I have 5 components defined in app.js file after one by one and created route for that as shown in app.js file and created header ...
0
votes
1
answer
606
views
React-Router: Component is not rendered but URL changes
I am new to React js.
I am implementing the drawer (material-ui), so when user clicks on left menu (LeftMenu.jsx); the respective component should get render in the center (i.e, MainContent.jsx)
...
0
votes
4
answers
379
views
Why React Router switch always showing first component?
I can try this code line;
// This code redirect to as "/" and it's work but example when ı write "/blabla" doesn't show Errorpage
<Switch>
<Suspense fallback={<...
0
votes
1
answer
349
views
Can't access array index in React
this Component is mapping an array and I am passing index of array via onClick in another function and after console i got Object.
And I really dont know about it...
Here is Component
const ...
3
votes
1
answer
4k
views
How do you get Material-UI Drawer to highlight the page it is currently at?
I'm currently trying to implement a website using Material-UI's drawer component. It works, when I click on the Drawer Items, it routes me to the correct pages.
But how do I get the individual Drawer ...
2
votes
2
answers
3k
views
Conditional routes not working in React Router
I want to allow routes only if the user has the appropriate role to visit them. I do the check both on the frontend and the backend, however when using Switch something is not working.
{localStorage....
1
vote
1
answer
2k
views
How can I pass function using props in React Router Link?
I have to pass a function to another component using Link
testFavorite=()=>{
console.log("work")
}
<Link
to={{
pathname: '/popular',
state:{...
1
vote
1
answer
1k
views
How to use react-router Link to access props.location in React typescript?
I tried the way it is described here React Typescript - How add Types to location.state when passed in a Route but its not working for me. I want to be able to access the page number whenever the user ...
0
votes
1
answer
358
views
How can query params be pushed and used for this page in react?
I found this codebase from the tutorial. I am trying to fetch data from paginated API.
The thing is that it looks like there is no usage of react-router here.
const [hits, setHits] = useState([]);
...
0
votes
1
answer
415
views
match.params.id returning undefined in react arrow functional components
I am creating a simple portfolio application for which I require a separate screen for each project from a list of projects. In doing so when I try to get the Id of that project from the URL using ...
1
vote
1
answer
1k
views
How to hide a button component on a particular route in react-router
I am new to javascript and react. I have done lots of Googling with no solution. I am trying to hide a button component on one of three pages/routes where it currently displays but when I try to do it,...
8
votes
2
answers
5k
views
Multiple Optional Params in React Router
I'm using React Router v5.
I've got a situation where I need to support the following use case.
I've got React component that is accessed via /project/1234. However, I also need to access this same ...
1
vote
0
answers
413
views
How to set default landing page in react router v5 based on roles
I have my router setup like below :
function PrivateRoute({ component: Component, isAllowed, ...rest }) {
return (
<Route
{...rest}
render={({ location }) =>
...
5
votes
2
answers
2k
views
React router - pass api data to the linked component to open with a new page
I am struggling to understand to design the routing here. For example -
array.map((each)=>(
<Link to="details/${each.id}"> <Card props={each}/> </Link>
))
...
2
votes
1
answer
779
views
Conditional routing in react v5.2
I have my router setup like below :
return (
<Router history={history}>
<Switch>
<Route exact path="/" component={SearchPage} />
<Route path=&...
1
vote
1
answer
266
views
Nested routing in react is not rendering nested component
Nested routing is not working. 'Landing' And 'home' components showing properly but nested components are not rendering.
The layout component is directly imported in app.js
there is no error in the ...
0
votes
1
answer
130
views
Router render same component for every rout path
For both path react render only landing component.
for path '/' and for path '/home' also. router render only landing component.
import {Route, BrowserRouter, Switch, HashRouter} from 'react-router-...
2
votes
0
answers
2k
views
React router render component twice
I have routs with children and on the first load, everything working fine but once I'm staring through the site, the components starting to render twice. I'm not sure what I'm doing wrong.
This is the ...
0
votes
1
answer
70
views
Incorrect redirect with react router
the react.js code below allows you to view a table with the component present in the table.js file this allows you to view a table and have access saved in it, to view the data you need to click on ...
1
vote
0
answers
194
views
react-router v3 - v5 PlainRoute migration
I've begun working on a rather large react project in which a large upgrade to the libraries is required.
Most migrations for non-supported libraries has gone smooth, but the combination of react-...
1
vote
1
answer
447
views
Access props when using the Link element and the useLocation hook from react router
I'm trying to send props to a child component rendered with the <Link> tag from react router. I'm doing like this:
This is how I use the Link element in the parent component (wrapped with the ...
0
votes
2
answers
1k
views
React-route useHistory doesn't work for me
Hi I'm doing a project with react and nodejs, I'm using window.location.href to redirect to another page if person successfully logged in and wanted to use useHistory to redirect to another page ...
1
vote
0
answers
564
views
how to send zip file as body in a post request in react?
Let's say I have a zip file uploaded by user, how do I pass it to the server for process?
I have front end function to handle zip file. I can verify that fileUploaded holds the zip file.
const ...
0
votes
1
answer
589
views
REACT: Location.Search Redirecting To A Wrong Page Of The App
I am building an e-commerce react app and currently am stuck on redirecting to the home page once the user is logged in. Am using location to search the URL and split it and take the right part of it ...