Можно ли предотвратить отображение какого-либо маршрута на стороне сервера в приложении React?

Question

Я собираюсь использовать рендеринг на стороне сервера для моего приложения реакции, чтобы улучшить SEO сайта. Поэтому для меня важно, чтобы некоторые страницы отображались на сервере. Однако я не хочу, чтобы остальные страницы (вложенные маршруты) отображались на стороне сервера. Могу ли я одновременно выполнять рендеринг на стороне клиента и сервера с разными маршрутами (и конфигурацией маршрутов)?

Answer 1

с использованием другой конфигурации маршрутизатора - вы получите предупреждение о реакции из-за несоответствия html.

, чтобы решить эту проблему, вы можете переключить ваш маршрутизатор на что-то вроде этого:

import React from 'react';
import { Route } from 'react-router-dom';

class RouterHandler extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false,
    };
  }

  componentDidMount() {
    this.setState({
      isShow: true,
    });
  }

  render() {
    const { isShow } = this.state;
    const { component, ...props } = this.props;
    if (isShow) {
      return <Route {...props} component={component} />;
    }
    return <div>Loading...</div>;
  }
}

и использоватьэто вместо вас <Router> внутри <Switch>

это будет работать, потому что componentDidMount вызывается только на стороне клиента.

при использовании фрагмента кода пользователь не увидит разницу.