Разница между внешней маршрутизацией реагирования и внутренней маршрутизацией: 1. Внутренняя маршрутизация запускается через тег Link в «react-router», а внутренняя маршрутизация запускается через ajax. 2. Внутренняя маршрутизация; на основе мониторинга событий браузера, а внутренняя маршрутизация основана на протоколе связи HTTP. 3. Внутренняя маршрутизация может обеспечить частичную отрисовку, а внутренняя маршрутизация может повторно отобразить всю страницу;
Операционная среда этого руководства: система Windows 10, версия 17.0.1, компьютер Dell G3.
Внутренний механизм маршрутизации
Студенты, знакомые с серверной частью, знают, что внутренняя маршрутизация означает, что серверная часть регистрирует функцию внутренней маршрутизации в app.js, а внешний интерфейс запускает соответствующую функцию обратного вызова маршрутизации через ajax (возьмем Express в качестве примера).
Триггер: аякс
Ответ: app.get('/router', обратный вызов)
Принцип: на основе протокола связи http.
//app.jsapp.get('/', (запрос, ответ) => { let ret = { "успех": true, "код": 200, "сообщение": "", "данные": [], } ответ.отправить(рет)})Механизм внешней маршрутизации
Что касается внешней маршрутизации (ссылаясь на реагирование-маршрутизатор), внешний интерфейс регистрирует внешнюю маршрутизацию и сопоставление компонентов в router.js, а внешний интерфейс вызывает рендеринг компонентов через маршрут, установленный Link, или путем ввода соответствующий маршрут в браузере:
Триггер: тег ссылки в реактивном маршрутизаторе
Ответ: Отобразите соответствующий компонент в теге Rout.
Принцип: на основе хеша в браузере (до React-Router v2), истории (React-Router v4).
//index.jsclass ListContent расширяет компонент {constructor(props){ super(props); this.state = { } } render() { return ( <Row> <Button>+ <Link to="/topic"> Сообщение темы </Link> </Button> </Row> ); }}//router.js<Router> <div> <Header/> <Switch> <Точный путь маршрута="/" компонент={index} /> < Точный путь маршрута="/topic" компонент={topic} /> </Switch> </div></Router>В router.js компонент заголовка всегда будет существовать на странице, а компоненты в теге Switch будут отображаться только после запуска. Можно просто понять, что неактивированные компоненты имеют значение null и не будут отображаться.
Поэтому формируется локальный рендеринг
//Если активирована внешняя маршрутизация «/topic», индексный компонент не будет отображать <Router> <div> <Header/> <Switch> <Route strict path="/" компонент={null} /> < Точный путь маршрута=" /topic" компонент={topic} /> </Switch> </div></Router>Разница между внешней и внутренней маршрутизацией
Маршрутизация внешнего интерфейса основана на мониторинге событий браузера и не передает протокол связи http.
Интерфейсная маршрутизация частично отображает, а серверная часть повторно отображает всю страницу. Условно говоря, интерфейсная маршрутизация лучше.