Javascript React路由器未更改组件_Javascript_Reactjs_React Redux_Server Side Rendering_Razzle

Javascript React路由器未更改组件

javascript reactjs

Javascript React路由器未更改组件,javascript,reactjs,react-redux,server-side-rendering,razzle,Javascript,Reactjs,React Redux,Server Side Rendering,Razzle,我正在尝试使用react JS+Razzle+Redux构建一个服务器端渲染应用程序。所以我创建了两条路线，如下所示 <StaticRouter history={history}> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/test" component=

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

    <StaticRouter history={history}>
      <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/test" component={HomeTest} />
      </Switch>
    </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;

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')
    );
  });
}

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;

import { createMemoryHistory } from 'history'

export const history = createMemoryHistory()

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;

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

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

主页

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

从“React”导入React；
常量Home=（）=>{
返回(
家1
);
}
导出默认主页；

家庭测试

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

从“React”导入React；
常量HomeTest=（）=>{
返回(
家2
);
}
导出默认HomeTest；

谢谢

不确定这是否是问题所在，但您在

App.js

中有两个导入的

'react-router-dom'

：

从'react Router dom'导入{Router}；// 您必须同时使用BrowserRouter和StaticRouter。按如下所示编辑文件，它应该可以工作：）
App.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;

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')
    );
  });
}


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;

import { createMemoryHistory } from 'history'

export const history = createMemoryHistory()


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;

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

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

const-App=（）=>(
///*删除此文件*/
///*删除此文件*/
);
导出默认应用程序；

server/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;

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')
    );
  });
}


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;

import { createMemoryHistory } from 'history'

export const history = createMemoryHistory()


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;

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

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

const上下文：StaticRouterContext={}；//加上这个
常量标记=renderToString(
我刚刚删除了一个，也合并了一个，还更新了帖子，但仍然不起作用