Question

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

这段代码工作正常

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

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

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>

您可以阅读更多Here

Answer 2

我认为您应该使用其中一个更高级别的路由器组件，例如BrowserRouter。看看是否有效：

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

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

2 个答案: