服务器上的 react-router-dom答案

【问题标题】：react-router-dom on the server服务器上的 react-router-dom
【发布时间】：2018-03-23 17:59:52
【问题描述】：

当我在服务器上渲染我的应用程序时，我确实发现我无法使用。我想根据情况将我的应用程序包装在指定的路由器中 - 客户端的 BrowserRouter 和服务器端的 StaticRouter。我的应用如下所示：

imports......
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
      return (
        <BrowserRouter>
          <div>
            <Menu />
            <main>
              <Switch>
                <Route exact path="/about" component = {About} />
                <Route exact path="/admin" component = {BooksForm} />
                <Route exact path="/cart" component = {Cart} />
                <Route exact path="/" component = {BookList} />
              </Switch>
              <Footer />
            </main>
          </div>
        </BrowserRouter>
      );

  }

  componentDidMount(){
    this.props.getCart();
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    getCart
  }, dispatch)
}

export default connect(null, mapDispatchToProps)(App);

我试图将我的 BrowserRouter 移出这个组件，所以我的 index.js 看起来像这样：

imports....
const renderApp = () => (
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </Provider>
)

const root = document.getElementById('app')
render(renderApp(), root)

所以我可以将我的应用程序包装在不同的路由器中。问题是当我将 BrowserRouter 从我的 App 组件中移出时，它停止工作。单击链接不再起作用。网址正在更改，但我的应用程序没有呈现不同的组件。如何将路由器移出此组件？

【问题讨论】：

您也可以通过动态设置组件标签在两个路由器之间切换：const RouterComponent = isClient ? BrowserRouter : StaticRouter; 然后<RouterComponent><App /></RouterComponent>

标签： javascript reactjs react-router server-side-rendering

【解决方案1】：

在服务器上，您将像这样包装您的应用程序：

 const routerContext = {};

 const appComponent = (
    <Provider store={store}>
      <StaticRouter location={req.url} context={routerContext}>
        <App />
       </StaticRouter>
    </Provider>
  );

向 react-router 传递位置（来自 url）以及上下文对象的位置。

客户端就像你的例子：

<Provider store={createStoreWithMiddleware(reducers)}>
  <BrowserRouter>
    <App/>
  </BrowserRouter>
</Provider>

【讨论】：