react-router

问题 I'm trying to use matchPath to extract a route param from the parent container as described in https://stackoverflow.com/a/45492498/3574819 const topicMatch = matchPath(history.location.pathname, { path: '/:topic' }); When I console.log(topicMatch.params) , the object has the topic key set but if I try to access topicMatch.params.topic I get the following error: error TS2339: Property 'topic' does not exist on type '{}'. const RouterApp = withRouter<{}>( class App extends React.Component

问题 I have created a new react application using npx create-react-app app-name Then I changed my directory to that app folder and then ran the following command. npm install react-router@next react-router-dom@next Then I ran my application and it worked fine. Then I changed the default code and used Routes, Route, etc. Here is APP code import React from 'react'; import {BrowserRouter as Router, Routes, Route} from "react-router-dom" function App() { return ( <Router> <Routes> <Route path="/"

问题 I have created a new react application using npx create-react-app app-name Then I changed my directory to that app folder and then ran the following command. npm install react-router@next react-router-dom@next Then I ran my application and it worked fine. Then I changed the default code and used Routes, Route, etc. Here is APP code import React from 'react'; import {BrowserRouter as Router, Routes, Route} from "react-router-dom" function App() { return ( <Router> <Routes> <Route path="/"

问题 I have this code here. On click of button, the lat and lon gets passed to a method called getFood which expects the params of lat and lon to make the right API call based on the location. <button onClick={() => this.props.onClick(meetup.venue.lat, meetup.venue.lon)}> <Link to="/restaurants">Find Restaurants</Link> </button> How can I pass this.props.onClick(meetup.venue.lat, meetup.venue.lon) into my <Link to="/restaurants">Find Restaurants</Link> ? The user would have to click on the button,

问题 There seems to be no API way to detect if you can go back from the current page in an app. One can check the history length, but that includes the forward and backward stack. I want to display the back button only when the user actually can go back. 回答1: I think I found a workaround There is onpopstate event: Calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action , such as clicking on the back

问题 There seems to be no API way to detect if you can go back from the current page in an app. One can check the history length, but that includes the forward and backward stack. I want to display the back button only when the user actually can go back. 回答1: I think I found a workaround There is onpopstate event: Calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action , such as clicking on the back

问题 I am trying to refresh a page using react-route Link. But the way I have implemented it goes to the URL one step back.(as an example if the URL was ../client/home/register and when I press the reload is goes to ../client/home) below is my code const AppErrorPage = () => ( <div> <div style={ styles.container }> <h2>Error</h2> <p> Something went wrong, please reload the page </p> <div> <Link to="" refresh="true"> <span>Reload</span> </Link> </div> </div> </div> ); 回答1: To refresh page you don't

问题 I am trying to refresh a page using react-route Link. But the way I have implemented it goes to the URL one step back.(as an example if the URL was ../client/home/register and when I press the reload is goes to ../client/home) below is my code const AppErrorPage = () => ( <div> <div style={ styles.container }> <h2>Error</h2> <p> Something went wrong, please reload the page </p> <div> <Link to="" refresh="true"> <span>Reload</span> </Link> </div> </div> </div> ); 回答1: To refresh page you don't

问题 I am trying to refresh a page using react-route Link. But the way I have implemented it goes to the URL one step back.(as an example if the URL was ../client/home/register and when I press the reload is goes to ../client/home) below is my code const AppErrorPage = () => ( <div> <div style={ styles.container }> <h2>Error</h2> <p> Something went wrong, please reload the page </p> <div> <Link to="" refresh="true"> <span>Reload</span> </Link> </div> </div> </div> ); 回答1: To refresh page you don't

来源： https://stackoverflow.com/questions/64623066/react-router-history-push-falls-back-to-404-route