A diferença entre o roteamento react front-end e o roteamento back-end: 1. O roteamento front-end é acionado por meio da tag Link em "react-router" e o roteamento back-end é acionado por meio de ajax 2. O roteamento front-end é; baseado no monitoramento de eventos do navegador, enquanto o roteamento de back-end é baseado no protocolo de comunicação http 3. O roteamento de front-end pode obter renderização parcial, enquanto o roteamento de back-end pode renderizar novamente a página inteira;
O ambiente operacional deste tutorial: sistema Windows 10, react versão 17.0.1, computador Dell G3.
Mecanismo de roteamento de back-end
Os alunos que conhecem o back-end sabem que o roteamento de back-end significa que o back-end registra a função de roteamento de back-end em app.js, e o front-end aciona a função de retorno de chamada de roteamento correspondente por meio de ajax (tome expresso como exemplo)
Gatilho: ajax
Resposta: app.get('/router',retorno de chamada)
Princípio: Baseado no protocolo de comunicação http
//app.jsapp.get('/', (solicitação, resposta) => { let ret = { "sucesso": verdadeiro, "código": 200, "mensagem": "", "dados": [], } resposta.send(ret)})Mecanismo de roteamento front-end
Quanto ao roteamento front-end (referindo-se ao roteador reativo), o front-end registra o roteamento front-end e o mapeamento de componentes em router.js, e o front-end causa a renderização do componente por meio da rota definida pelo Link ou inserindo o rota correspondente no navegador:
Gatilho: tag de link no roteador react
Resposta: Renderize o componente correspondente na tag Rout
Princípio: Baseado em hash no navegador (antes do React-Router v2), histórico (React-Router v4)
//index.jsclass ListContent estende Componente { construtor(props){ super(props); this.state = { } } render() { return ( <Row> <Button>+ <Link to="/topic"> Postar tópico </Link> </Button> </Row> }}//router.js<Router> <div> <Header/> <Switch> <Route exact path="/" component={index} /> < Rota exata path="/topic" componente={topic} /> </Switch> </div></Router>No router.js, o componente do cabeçalho sempre existirá na página, enquanto os componentes da tag Switch só serão renderizados após serem acionados. Pode-se simplesmente entender que os componentes não acionados são nulos e não serão exibidos.
Portanto, a renderização local é formada
//Se o roteamento front-end '/topic' for acionado, o componente de índice não renderizará <Router> <div> <Header/> <Switch> <Route exact path="/" component={null} /> < Rota exata path=" /topic" componente={topic} /> </Switch> </div></Router>A diferença entre roteamento front-end e roteamento back-end
O roteamento front-end é baseado no monitoramento de eventos do navegador e não passa pelo protocolo de comunicação http
O roteamento front-end renderiza parcialmente e o back-end renderiza novamente a página inteira. Relativamente falando, a experiência de roteamento front-end é melhor.