react-router-dom

React Router display one component for all routes ( a header)

浪尽此生 提交于 2021-02-19 05:43:05
问题 Have a question regarding react router. I have a header item that I would like to display for all routes. And of course, I want this to be part of the so that the user can click items from a nav. Currently I have my <Header /> outside of my <Router> and I guess this isn´t working since my router then don't know to re-render? import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' <div> <Header /> <Router> <Switch> <Route exact path="/" component={Posts} /> <Route exact path=

ReactJS: React-Router pass value to another page

柔情痞子 提交于 2021-02-11 18:16:22
问题 I have need to pass a value from a page to another using react-router. I have tried in this way: <li> <A className="btn btn-link btn-sm" href={{ pathname: Routes.detail_page, search: `?_id=${C.Code}`, state: this.props.current }}> { 'Open' } </A> </li> I would pass this.props.current to Detail Page. In the other page if I tried in the componentDidMount() to print this.props.current it result undefined (of course in the first page this value is parametrized). constructor(props){ super(props);

React-router-dom not re rendering Switch when state is change

自作多情 提交于 2021-02-11 17:05:29
问题 I am using aws-amplify, react-hook in my project. The app have some private Routes has been define below: const ProtectedRoute = ({render: C, props: childProps, ...rest}) => { return ( <Route {...rest} render={rProps => (childProps) ? ( <C {...rProps} {...childProps} /> ) : ( <Redirect to={`/login?redirect=${rProps.location.pathname}${ rProps.location.search }`} /> ) } /> ); } In App.js, we change childProps to define whether user is login or not. But when childProps change, Switch not re

React-router-dom not re rendering Switch when state is change

让人想犯罪 __ 提交于 2021-02-11 17:04:26
问题 I am using aws-amplify, react-hook in my project. The app have some private Routes has been define below: const ProtectedRoute = ({render: C, props: childProps, ...rest}) => { return ( <Route {...rest} render={rProps => (childProps) ? ( <C {...rProps} {...childProps} /> ) : ( <Redirect to={`/login?redirect=${rProps.location.pathname}${ rProps.location.search }`} /> ) } /> ); } In App.js, we change childProps to define whether user is login or not. But when childProps change, Switch not re

Terminal failed to compile using react routers (wrong syntax probably )

家住魔仙堡 提交于 2021-02-11 15:36:05
问题 The Terminal failed to compile. because create is not defined, I still learn using routers , it seems that the syntax or the locations wrong, I tried to understand how should I write it right in this project but there are too many details in my code already. The goal is to show one page with a single button which open and display the form to create a room . After the user finished fill out the details (at Addroom component ) and clicked on the Create button I want to display the titles with

Terminal failed to compile using react routers (wrong syntax probably )

≯℡__Kan透↙ 提交于 2021-02-11 15:35:26
问题 The Terminal failed to compile. because create is not defined, I still learn using routers , it seems that the syntax or the locations wrong, I tried to understand how should I write it right in this project but there are too many details in my code already. The goal is to show one page with a single button which open and display the form to create a room . After the user finished fill out the details (at Addroom component ) and clicked on the Create button I want to display the titles with

this.props.history showing undefine in console in React JS

百般思念 提交于 2021-02-11 13:19:17
问题 In my react app I want to send state to the next path through the history.location.state and history.location.pathname In my case, it has to push successfully and also showing in history but when I console.log(this.props.history) in the child page showing undefined. MyComponent Code import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; class MyComponent extends Component { state = { cart: { 1:{ icon: "URL" id: 1 quantity: 1 title: "item1" } 2:{ icon: "URL"

this.props.history showing undefine in console in React JS

时光毁灭记忆、已成空白 提交于 2021-02-11 13:19:04
问题 In my react app I want to send state to the next path through the history.location.state and history.location.pathname In my case, it has to push successfully and also showing in history but when I console.log(this.props.history) in the child page showing undefined. MyComponent Code import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; class MyComponent extends Component { state = { cart: { 1:{ icon: "URL" id: 1 quantity: 1 title: "item1" } 2:{ icon: "URL"

React.js - passing props to children from hoc

笑着哭i 提交于 2021-02-10 17:35:34
问题 I have been trying to pass some props from my HOC to children. the HOC wraps react router switch and route. The props are missing in the child component. I make use of React.CloneElement to add the props to the children but do not seem to work <BrowserRouter> <Layout> <React.Suspense fallback={loading()}> <Switch> <Route exact path="/" component={Login} /> <Route path="/dashboard" component={Home} /> <Route path="/tickets" component={Tickets} /> </Switch> </React.Suspense> </Layout> <

How to prevent user multiple click submit button error for a login form in react?

吃可爱长大的小学妹 提交于 2021-02-10 14:14:47
问题 I use formik and react-router-dom for my react login management. However, if click the submit button multiple times in a short time, after redirect to home page, there will be an error of "Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in SignInForm (created by Route) in Route (at App.js:52)" And the home page