时间戳

首页 > 解决方案 > React Router 没有改变组件

javascript - React Router 没有改变组件

问题描述

我正在尝试使用 react JS + Razzle + Redux 构建一个服务器端渲染应用程序。所以我创建了如下两条路线。

    <StaticRouter history={history}>
      <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/test" component={HomeTest} />
      </Switch>
    </StaticRouter>

我目前有两条路线，一条是回家，第二条是测试，我面临的问题是，它没有改变路线，只是显示回家

我已经尝试过这两种Router选择StaticRouter。

请指教。

服务器/index.js

import App from '../common/containers/App';
import { Provider } from 'react-redux';
import React from 'react';
import configureStore from '../common/store/configureStore';
import express from 'express';
import { fetchCounter } from '../common/api/counter';
import qs from 'qs';
import { renderToString } from 'react-dom/server';
import serialize from 'serialize-javascript';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    fetchCounter(apiResult => {
      // Read the counter from the request, if provided
      const params = qs.parse(req.query);
      const counter = parseInt(params.counter, 10) || apiResult || 0;

      // Compile an initial state
      const preloadedState = { counter };

      // Create a new Redux store instance
      const store = configureStore(preloadedState);

      // Render the component to a string
      const markup = renderToString(
        <Provider store={store}>
          <App />
        </Provider>
      );

      // Grab the initial state from our Redux store
      const finalState = store.getState();

      res.send(`<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Razzle Redux Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${assets.client.css
          ? `<link rel="stylesheet" href="${assets.client.css}">`
          : ''}
          ${process.env.NODE_ENV === 'production'
            ? `<script src="${assets.client.js}" defer></script>`
            : `<script src="${assets.client.js}" defer crossorigin></script>`}
    </head>
    <body>
        <div id="root">${markup}</div>
        <script>
          window.__PRELOADED_STATE__ = ${serialize(finalState)}
        </script>
    </body>
</html>`);
    });
  });

export default server;

客户端/index.js

import React from 'react';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from '../common/store/configureStore';
import App from '../common/containers/App';

import '../assets/sass/App.scss';
import '../assets/sass/application.scss'
import 'semantic-ui-css/semantic.min.css';

const store = configureStore(window.__PRELOADED_STATE__);

hydrate(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept('../common/containers/App', () => {
    hydrate(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );
  });
}

应用程序.js

import React from 'react';
import Counter from '../components/Counter';
import Home from '../../pages/Home/Home';
import HomeTest from '../../pages/Home/HomeTest';
import { StaticRouter, Route, Switch } from 'react-router-dom';

import { history } from '../../pages/utils/history'

const App = () => (
    <StaticRouter history={history}>
      <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/test" component={HomeTest} />
      </Switch>
    </StaticRouter>
);

export default App;

历史.js

import { createMemoryHistory } from 'history'

export const history = createMemoryHistory()

家

import React from 'react';
const Home = () => {
    return (
        <main className="main-wrapper">
            <h2>Home 1</h2>
        </main>
    );
}
export default Home;

家庭测试

import React from 'react';
const HomeTest = () => {
    return (
        <main className="main-wrapper">
            <h2>Home 2</h2>
        </main>
    );
}
export default HomeTest;

谢谢

标签： javascriptreactjsreact-reduxserver-side-renderingrazzle

解决方案

您必须同时使用 BrowserRouter 和 StaticRouter。如下编辑您的文件，它应该可以工作:)

应用程序.js

const App = () => (
    // <StaticRouter history={history}> /* remove this */
      <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/test" component={HomeTest} />
      </Switch>
    // </StaticRouter> /* remove this */
);

export default App;

服务器/index.js

const context: StaticRouterContext = {}; // add this
const markup = renderToString(
  <Provider store={store}>
    <StaticRouter location={req.originalUrl} context={context}> 
       <App />
    </StaticRouter>
  </Provider>
);

客户端/index.js

hydrate(
  <Provider store={store}>
    <BrowserRouter> 
       <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

如果您想了解有关此设置的更多信息，请观看此视频： https ://www.youtube.com/watch?v=dSO3GUL7JYE&list=PLMhLdUN2ZKJ2f-QDFBP1iphsmPd81MQOO&index=24&t=2s&ab_channel=BeALearner

推荐阅读