react-router-v4

问题 First of all, I am pretty familiar with the withRouter HoC, however, in this case, it doesn't help because I do not want to access the history object in a component. I am trying to achieve a mechanism that will redirect the user to the login page if I receive back a 401 from a API endpoint. For making http requests I am using axios. I have around 60 endpoints that I need to cover, that are used in a dozen of components throughout my app. I want to create a decorator function to the axios

问题 I try to setup nested routes for my react app like this / -> Home Page /about -> About Page /protected -> protected default page /protected/page1 -> protected page 1 It works fine in codesandbox (https://codesandbox.io/s/react-router-nested-route-utqy7) React 16.8.1 React Router 4.3.1 But when I set the same thing up with webpack-dev-server (3.7.1), it can only reach / and can't reach to the rest routes. My file structure is like ├── package.json ├── src │ ├── index.jsx │ └── index.html ├──

问题 I try to setup nested routes for my react app like this / -> Home Page /about -> About Page /protected -> protected default page /protected/page1 -> protected page 1 It works fine in codesandbox (https://codesandbox.io/s/react-router-nested-route-utqy7) React 16.8.1 React Router 4.3.1 But when I set the same thing up with webpack-dev-server (3.7.1), it can only reach / and can't reach to the rest routes. My file structure is like ├── package.json ├── src │ ├── index.jsx │ └── index.html ├──

问题 I have a route page with a datatable fetch data when component mount. When I click on the same react-router-dom Link (to the route above) multiple times, it seems like component only unmount when the route change (with different component to be render). I want the component to be forced remount when click on the same link again in order to fetch new data. Are there any options in react-router-dom Link or any other Link component or any trick to do this? My sample code here: https:/

问题 I have a route page with a datatable fetch data when component mount. When I click on the same react-router-dom Link (to the route above) multiple times, it seems like component only unmount when the route change (with different component to be render). I want the component to be forced remount when click on the same link again in order to fetch new data. Are there any options in react-router-dom Link or any other Link component or any trick to do this? My sample code here: https:/

问题 what is the difference between html tag "/href" and navlink provided by react-router to navigate the page? I can use both in order to navigate page to the different URL, so why there was need of introducing Navlink or Link? 回答1: The href attribute would trigger a page refresh which would reset the application states. However the link and navlink of react-router doesn't trigger a page refresh. Since React is used to create single page applications most of the time make sure you choose Link or

问题 I have this paths in react-router-dom: <BrowserRouter> <div> <Route exact path='/(index.html)?' component={Home}/> {/* app = home */} <Route path='/register' component={Registration}/> </div> </BrowserRouter> everything is working fine, now anywhere in my components I want to change path by onClick, a code like this: <button onClick={() => history.push('/the/path') }> change path </button> how can I do that? 回答1: import {withRouter} from 'react-router-dom'; ... class App extends React

问题 I have this paths in react-router-dom: <BrowserRouter> <div> <Route exact path='/(index.html)?' component={Home}/> {/* app = home */} <Route path='/register' component={Registration}/> </div> </BrowserRouter> everything is working fine, now anywhere in my components I want to change path by onClick, a code like this: <button onClick={() => history.push('/the/path') }> change path </button> how can I do that? 回答1: import {withRouter} from 'react-router-dom'; ... class App extends React

问题 Currently when I create my routes, I check an Auth0 method - isAuthenticated() - to determine whether or not to return a protected page or redirect to login. However, this state only exists in memory and does not keep a user on their page upon browser refresh and I would like to do so. This is a React/RR4/React Context app and my Auth0 methods are listed in Auth.js (below). It is highly inadvisable to store login state in localStorage. And if I store my Auth0 tokens in cookies, I'm not sure

问题 Need to set the href value for <base href=""/> tag based on build environment configuration. Eg: Staging should have <base href="/staging" /> Prod should have <base href="/" /> Current setup: Build command: "build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'", "build:staging": "REACT_APP_ENV=staging npm run build", "build:prod": "REACT_APP_ENV=production npm run build", .env.staging.js: REACT_APP_BASE_HREF=/staging index.html: .... <base href="" + process.env.REACT_APP_API_URL />