Question

这是我的路由器定义：

export default class Routes extends Component {
  render() {
    return (
      <Switch>
        <Redirect exact from="/" to="/dashboard" />
        <Route component={Dashboard} exact path="/dashboard" />
        <Route component={Sites} exact path="/sites" />
        <Route component={RegisterSite} exact path="/register" />
      </Switch>
    )
  }
}

以及主要的App组件的创建：

export default class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Router history={browserHistory}>
          <Routes />
        </Router>
      </ThemeProvider>
    )
  }
}

在完成此设置后，我认为所有在Route组件中注册的组件都应将browserHistory注入其道具中，但只有Dashboard组件的历史记录才被注入其道具中。例如，当我尝试访问Sites组件内部的历史记录时，我将无法定义。

这是预期的还是我做错了什么？

Answer 1

使用BrowserRouter

从文档中

使用HTML5历史记录API（pushState，replaceState和popstate事件）的public class AlphaVantageData { public DateTime Timestamp { get; set; } public decimal Open { get; set; } public decimal High { get; set; } public decimal Low { get; set; } public decimal Close { get; set; } public decimal Volume { get; set; } } // retrieve monthly prices for Microsoft var symbol = "MSFT"; var apiKey = "demo"; // retrieve your api key from https://www.alphavantage.co/support/#api-key var monthlyPrices = $"https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol={symbol}&apikey={apiKey}&datatype=csv" .GetStringFromUrl().FromCsv<List<AlphaVantageData>>(); monthlyPrices.PrintDump();使您的UI与URL保持同步。

无法从React组件道具访问BrowserHistory

1 个答案: