在 react redux 应用程序中使用 react-router 重定向

Question

我正在尝试为我的应用程序实现路由，该应用程序是用 react 和 redux 构建的。我已经包装好了，以便路由处理程序可以访问商店。但不知何故，我的路由逻辑不起作用。

这段代码工作正常

export default class Root extends Component {
  render() {
    return (
      <Provider store={this.props.store}>
        <div>
          <App /> 
        </div>
      </Provider>
    );
  }
}

但是当我用下面的代码替换时，它不会在我的本地主机上显示任何内容。

export default class Root extends Component {
  render() {
    return (
      <Provider store={this.props.store}>
        <div>
        <Router>
        <Route path="/" component={App} />
        </Router>
        </div>
      </Provider>
    );
  }
}

我

试图弄清楚我做错了什么。任何帮助将不胜感激。

Answer 1

我假设您的项目是基于浏览器的项目。因此，如果您的网站/应用程序托管在动态服务器上，则可以使用<BrowserRouter>。您可以像这样包装它：

    import {BrowserRouter, Route} from 'react-router-dom';
    export default class Root extends Component {
      render() {
        return (
          <Provider store={this.props.store}>
            <div>
            <BrowserRouter>
            <Route path="/" component={App} />    
            <BrowserRouter>
            </div>
          </Provider>
        );
      }
    }

如果您的网络由静态服务器支持，请使用<HashRouter>

你可以在这里阅读更多

Answer 2

我认为你应该使用更高级别的路由器组件之一，如BrowserRouter。看看这是否有效：

return (
  <Provider store={this.props.store}>
    <div>
      <BrowserRouter>
        <Route path="/" component={App} />
      </BrowserRouter>
    </div>
  </Provider>
);