Questions tagged [react-router]
React Router - A complete routing library for React inspired by Ember's routing system
0
votes
0answers
9 views
Reactjs webbrowser application not able to view on mobile/Ipad browser safari or chrome.Able to view on desktop and on dev tools for any device
Have deployed the site in heroku and here's the URL:https://mo-betta.herokuapp.com/login.
All other browsers on mobile/Ipad are returning empty blank page.
The code repo can be found in https://...
1
vote
1answer
21 views
Condition within map produces an error in ReactJS
I am making a condition that when it is fulfilled, I return an html in the "Return".
Next, my code will be
import React, { Component } from 'react';
import gql from 'graphql-tag';
import { graphql } ...
0
votes
0answers
10 views
how to deploy React application in my hosting server
I have a normal HTML website and inside it there is a button that links to react application. I used npm run build in the terminal and then I deployed all files inside build folder into public_html/...
0
votes
1answer
32 views
React children props are always equal
I was trying to implement an ErrorBoundary HoC component for error handling as per React16 Doc. I made the ErrorBoundary component as PureComponent and I noticed that the children props are always ...
2
votes
0answers
35 views
Why does <Link to=“/”> cause an infinite loop/crash in my React app?
i'm currently developing a React+Redux front-end app and i'm running into a problem that seems inexplicable to me. When using a component, it works correctly from any other page but the homepage (the ...
0
votes
1answer
10 views
Prevent remounting of layout component if react router params stay the same
I have a layout component which renders an image of quite a large size. This layout component is shared between two other components, Map and Explore. When the route changes, it renders either the Map ...
0
votes
1answer
14 views
How to integrate dashboard on exsiting app with ReactJS?
I have a dashboard Reactify and I want to integrate it into my reactjs app with create-react-app.
I want to redirect to the dashboard from my application with the route /admin.
How can I fix that ?
0
votes
1answer
22 views
How to pass a function to child component as a prop?
I want to pass down a function isLoggedIn to child component HandleArticle as a prop.
Even though I am using arrow function due to this issue, TypeError: this.isLoggedIn is not a function occurs.
...
3
votes
0answers
29 views
How to pass props from <Route /> to a component
Even after using the render option in the component, the component inside render is not receiving an new prop.
Have checked if other default props are accessible and they are.
Layout.js:
<...
0
votes
0answers
13 views
React + Redux + SSR: Cannot find store only when navigating directly to connected component
I'm relatively new to SSR with React and Redux, so I assume I'm making a simple mistake that reflects my lack of understanding of the underlying frameworks. However, I'm about to put my head through a ...
1
vote
1answer
20 views
Passing parameters to dynamically generated react routes
I'm using react-router-dom and generate my routes dynamically from an array like so
Routes Data
const routes = [
{
path: '/',
exact: true,
component: () => <MyComponent />
}
...
1
vote
1answer
25 views
How to render components in react-router-dom with bundle.js file?
I've created a web-app and using react-router-dom for navigations in the app. Everything works fine when I start the app using webpack-dev-server and now its time to deploy this app on my server so I'...
0
votes
0answers
25 views
Link does not work from React Router Dom + hooks + redux + typescript
I am doing an app that uses:
react router
redux
typescript
hooks
Apollo client
Problem
The component Link doesn't work for me. Tried to check many pages for the issue without success. All time I ...
0
votes
0answers
19 views
How to do reverse animation when switching a react-router?
I try do animation increasing the element on the whole page when clicking on it, the element is also a link for router.
It must be something like that but with reverse animation when we going buck on ...
0
votes
1answer
21 views
React call parent method from child of a child
i'm facing a small problem with my react app.
I'm using bluprintjs Toaster, and i need to display them on top of all other component, no matter what. Like this if there is an error during login or ...
0
votes
0answers
29 views
Azure routing is interfering with React routing
In a React SPA, I have a collection of "pages" under the /src/pages/ folder.
The entry point page is an index.js file under the /src/ folder, where I define a router const like this:
const routing = ...
-2
votes
0answers
17 views
Private Route with ReactJs and React Router Params in Body
it is possible to implement a private route receiving parameters per body and JWT token with react router?
0
votes
0answers
35 views
Can I embed or serve a built React app within another React-Router app?
I have a personal website/portfolio built with ReactJS and React-Router. I want to be able to serve separately developed and built ReactJS apps as my coding demos from within my personal website (...
1
vote
1answer
24 views
What's the proper way to redirect with React routing when a user is not logged into the application?
In a React SPA, I have a collection of "pages" under the /src/pages/ folder.
The entry point page is an index.js file under the /src/ folder, where I define a router const like this:
const routing = ...
0
votes
2answers
35 views
Whe I use the react route 4 history, but the console gives the follow warning. Can anyone tell me the reason?
warnning: ignores the history prop. To use a custom history, use import { Router} instead of import {HashRouter as Router}
0
votes
2answers
17 views
React Router: custom browser router getUserConfirmation dialog
I've got custom BrowserRouter component because I need access to history instance out of React Component, so I've created it this way:
OwnBrowserRouter.js
import { BrowserRouter } from "react-router-...
0
votes
1answer
21 views
ReactJS dynamic pages from mongodb
It's third day of research and I can't find simple solution. The thing is that I want to create dynamic reactjs page. For example "example.com/project/10" generates 10th project from mongodb. It seems ...
0
votes
2answers
29 views
How to open home page after successful login in reactjs?
When login success it redirects me to Main Page, but when I go to browser and open http://localhost:3000/MainPage it shows me Main Page (actually It must throw me to Login Page, because I am not ...
1
vote
0answers
21 views
Routes requiring authentication in react another way to handle (PrivateRoutes)
I'm looking for a way to do some route protection with react-router-4. Looking at an example in the documentation, they create a Component which is rendered like this:
<PrivateRoute path="/...
1
vote
1answer
36 views
React Router V4 - Components not rendering under <Switch>
I'm trying to turn a block of hardcoded <Route />s into something that's dynamically generated from a config variable. Eg.
From
<Router>
<Switch>
<Route path="/" ...
1
vote
4answers
44 views
React-router how to redirect to server port
Hi I am using react router v4.
My React runs on port 3000, while express server runs on port 8080. The Redirect segment of the code below brings me to localhost:3000/http://localhost:8080/auth/login....
0
votes
2answers
20 views
What component did I miss to export? Error type is invalid…error
I am sure I exported all my components, yet I keep getting the same error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)but got: ...
0
votes
1answer
22 views
React redirect to another page with the Enter key without refreshing the page
constructor(props){
super(props);
this.state = { term: '' };
this.onInputChange = this.onInputChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
}
onInputChange(...
0
votes
3answers
36 views
Parameter passing in react native navigation
I am new to react-native and react-navigation. How do I pass params between navigators? i.e. Passing some parameters from
NavigatorA to the another screen of NavigatorB
See below for my Navigator ...
1
vote
1answer
39 views
React Redux Form (Multiple Forms) - Routing & State Handling Issue
I am building a SPA using React. I have different forms on different routes. I am using Redux Form for building & maintaining the state of the form. I have components and most of them have a form. ...
0
votes
1answer
24 views
React - Migrating to React Router 4
I am in the process of migrating my React App from React-Router-3 to React-Router-4 and I am having a few issues. The layout of my application is as follows.
build
node_modules
public
src
...
0
votes
1answer
18 views
React Router with many different URL variations
I have a site.
http://example.com
On my site I have multiple languages which get appended to the url.
So the homepage becomes something such as
http://example.com/english
When the user navigates ...
2
votes
2answers
33 views
React Route does not work with nested URLs
I am trying to use a switch that routes different components depending on a URL. This URl should be able to be nested, like courses/:cid/assignments/:aid.
This is how my Switch looks like:
<...
0
votes
0answers
36 views
Resolve React Lazy Components for React Router test
I am having a problem with Jest testing React lazy components. The lazy components do not resolve to React components and instead are the lazy objects, so it throws the Invariant Violation: Element ...
0
votes
1answer
20 views
ReferenceError: Can't find variable: Login
This is the rejection error I'm getting
Here's where the trouble started to occur "Routes.js":
import React, {Component} from 'react';
import {Router, Stack, Scene} from 'react-native-router-flux';
...
-1
votes
2answers
39 views
How can I update High Order Component
I created array of routing in ReactJS
const routes = [
{ id: 0, path: '/', view: Home, parent: 0 },
{ id: 1, path: '/a', view: Home2, parent: 0 },
{ id: 2, path: '/b', view: Home3, parent: 1 }
]...
0
votes
0answers
15 views
Need to decide whether to load images on demand or package with the app
I am using React srcSet to display image based on screen resolution,this images are for Not Found Page(404 page) when users enters wrong url, they are redirected to this page which says "This Page was ...
0
votes
0answers
30 views
Duplicate identifier 'LibraryManagedAttributes
I am getting the following error when I am building my Reacttsx project.
Error:
node_modules/@types/react-router/node_modules/@types/react/index.d.ts
(2746,14): Duplicate identifier '...
0
votes
1answer
27 views
Open a different website to a new window with React Router
I have <a href="http://google.com" rel="noopener noreferrer" target="_blank"><i className="fab fa-github-alt" aria-hidden="true" /></a>
How do I use React Router open a different ...
0
votes
1answer
23 views
Load React SPA according to requested route
I am building a react-router-redux SPA. Currently the application works great. No matter what url the user enters, the server sends index.html and starts in the root route ('/'). What I am trying to ...
2
votes
1answer
71 views
ReactJS jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #/login
I have a problem with React-route-dom Link whenever I try to use it in Navbar it gives me this error:
Uncaught Error: Syntax error, unrecognized expression: #/login
at Function.ga.error (jquery....
1
vote
1answer
49 views
React - how to create a dynamic (using router) details pages
This is my data (in a seperate JS file):
const someData= [
{
id: 1,
title: "Article 1",
desc: "Some description lorem ipsum",
},
{
id: 2,
title: "...
0
votes
0answers
49 views
TypeError: Cannot read property of “content” of undefined
React app route returns an error when the page is reloaded in the browser.
My landing page has a blog section with buttons that link to a page with the full list of blog articles and another set of ...
0
votes
0answers
7 views
How do I configure web pack config file to show home page?
I am running a spring boot and react app together. I am having issues with viewing the home page. I think it is because of my webpack.config.js file. I believe it is not correct.
I've tried ...
-1
votes
0answers
14 views
How to navigate to a page on click of a button and then toggle a div?
Say - On click of a button, it has to navigate to FAQ's page and scroll to a specific div and toggle that div.
I have tried using 'Link To' functionality in React to navigate to the page and scroll ...
0
votes
1answer
8 views
Right place for React Server side rendering API call
We're using ComponentWillMount() life cycle for API calls in react 15 for server side rendering. Now, we going to migrating our application to react 16.8 which is ideal place to call API action in ...
0
votes
1answer
21 views
React Router links don't work on realoading after deploying
This is the first time I am deploying a web application with react without a webpack and I have this problem which is explained in the react router documentation - you can access only the home page ...
0
votes
1answer
17 views
i keep getting logged out even though i have set the authentication with protected routes in react/redux ? when i refresh the page
I am trying to make protected routes with react and redux , i have made actions on redux for initaiting auth()!
Here's a route :
<BrowserRouter baseName="/">
<...
0
votes
1answer
23 views
React-Router path with parameters displaying properly in development but not in production
I have a very simple react app, basically i want to display a page from a link with parameters and i display the parameters in the page.
The funny thing is it renders properly in development and when ...
0
votes
1answer
35 views
Misplaced page content material-ui layout with react
I'm working on a react page using material-ui within electron. The main page should have an AppBar with Toolbar and Drawer components.
I have copied the source code from https://material-ui.com/...