react-router

问题 This is my main section class where all routes to the links is kept export default class Section extends React.Component { render() { return ( <div style={{backgroundColor:"white"}}> <Routes> <Route path="/" element={<Home/>} /> <Route path="/discover" element={<Discover/>} /> <Route path="/shop/makeup" element={<Makeup/>} /> <Route path="/home/:id" element={<DetailsPage/>} /> </Routes> </div> )}} This is my card page which is getting data from the context. import React from 'react'; import

问题 React Router Link component takes in target="_blank" to open the page in a new tab. Is there a way to do the same with the Redirect component? The way my components are set up, I can't wrap Link around the component in question (there is a button on the component, clicking on which also redirects, which I don't want) that's why I'm using Redirect instead, but can't find a way to open the new URL in a new tab, How can it be done? 回答1: Is there a way to do the same with the Redirect component?

问题 I have a react app with a main App.js file that holds my initial state. I then have some routes setup to navigate around my application. In one of the routes I have a button which when pressed processes a set state. I know that this works as I've console logged the change in state. However, it then also calls: window.location.href = '/'; This then routes us to our homepage. However, once the homepage renders the state reverts to its initial setup as detailed in App.js. I don't know why state

问题 I have a React app, and I have an issue with 404 in my navigation, if I try to refresh a page that is not the root page, it will give me a 404. Thing is it only happens to me on production and not on dev. In dev environment, I use npm start , on prod environment, I use serve build . This make debug more complicated, as I lose the hot-reload option for debugging. I must compile my docker image each time I make a change. Here is a bit of my code: <BrowserRouter> <div> <Switch> <Route exact path

问题 I know we can replace query params in component based classes doing something along the lines of: componentDidMount() { const { location, replace } = this.props; const queryParams = new URLSearchParams(location.search); if (queryParams.has('error')) { this.setError( 'There was a problem.' ); queryParams.delete('error'); replace({ search: queryParams.toString(), }); } } Is there a way to do it with react hooks in a functional component? 回答1: Yes, you can use useHistory & useLocation hooks from

问题 I have seen this in 2 different code bases now and am stumped because it works fine in the actual browser but not the tests: if a component uses the useParams hook, the hook throws an error in the test: Error: Uncaught [TypeError: Cannot destructure property accountId of 'undefined' or 'null'.] I am using React Functional Component, React Testing Library and React-Router: // component: const Overview: FC = () => { const location = useLocation(); console.log(location) // see below const {

问题 I have this little app that works fine in development mode with webpack-dev-server, but when I use the bundled files from the dist folder generated by the production mode, all I get in the browser is this error: Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/' cannot be created in a document with origin 'null' and URL 'file:///C:/Users/cristi/work/react_test_ground/dist/index.html'. How can I solve this pushState problem?

问题 I want to make secure routes using authentication. I have defined the routes in App.jsx file. I am using "Route" to define which component to render. In App.jsx <Route path='/dashboard' exact={true} render={(props) => <Dashboard {...props} user={user} handleChildFunc={this.handleChildFunc}/>} /> The above code works without any issue. I want to make that secured like below. <PrivateRoute path='/dashboard' exact={true} render={(props) => <Dashboard {...props} user={user} handleChildFunc={this

问题 I want to make secure routes using authentication. I have defined the routes in App.jsx file. I am using "Route" to define which component to render. In App.jsx <Route path='/dashboard' exact={true} render={(props) => <Dashboard {...props} user={user} handleChildFunc={this.handleChildFunc}/>} /> The above code works without any issue. I want to make that secured like below. <PrivateRoute path='/dashboard' exact={true} render={(props) => <Dashboard {...props} user={user} handleChildFunc={this

问题 I want to make secure routes using authentication. I have defined the routes in App.jsx file. I am using "Route" to define which component to render. In App.jsx <Route path='/dashboard' exact={true} render={(props) => <Dashboard {...props} user={user} handleChildFunc={this.handleChildFunc}/>} /> The above code works without any issue. I want to make that secured like below. <PrivateRoute path='/dashboard' exact={true} render={(props) => <Dashboard {...props} user={user} handleChildFunc={this