React Router V5 HashRouter 不存儲歷史記錄
[英]React Router V5 HashRouter not storing history
問題描述
我正在構建一個反應應用程序，我在其中使用 react-router v4。 我像這樣正確定義了我的路由器。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './styles/marmore.css';
import './styles/lasanha.css';
import './styles/stt.css';
import './styles/stt2.css';
import './styles/footer.min.css';
import './styles/header.min.css';
import App from './App';
import { BrowserRouter, HashRouter } from 'react-router-dom'
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import { Store } from './store';
ReactDOM.render((
<Provider store={Store}>
<HashRouter>
<App />
</HashRouter>
</Provider>
), document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();
應用程序.js
import React, { Component } from 'react';
import Header from './components/header';
import Footer from './components/footer';
import EmptyCart from './components/emptycart';
import Cart from './components/cart';
import Identification from './components/identification';
import Cadastro from './components/cadastro';
import Entrega from './components/entrega';
import Pagamento from './components/pagamento';
import Boleto from './components/boleto';
import Imprimir from './components/imprimir';
import api from './services/api';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Route, Redirect, Switch, withRouter} from "react-router-dom";
import { changeAuth, addRegister, addCart, addFinger, addStep} from './actions';
import io from 'socket.io-client';
import $ from 'jquery';
import CryptoAES from 'crypto-js/aes';
import CryptoENC from 'crypto-js/enc-utf8';
import {mMobile} from './functions/index';
import jwt from 'jsonwebtoken';
import Fingerprint2 from 'fingerprintjs2';
var blacklist = [];
const socket = io(window.location.protocol + '//' + window.location.hostname, {path: '/events'});
class App extends Component{
constructor(){
super();
this.state = {blocked: false, cartEmpty: true, out: false, mobileDevice: false, authenticated: false, cards: [], loading: true, loadingAuth: true, cart: { foto: '', vendedor: '', seller_label: '', nome: '', valor: '', valorAntigo: '', produto_id: '', presente: []}, user: { nome_completo: '', endereco: '', num: '', bairro: '', complemento: '', referencia: '', cidade: '', estado: '', cep: '' }}
this.setAuth = this.setAuth.bind(this);
window.onhashchange = () => {
this.att();
}
window.onresize = () => {
this.verifyDevice();
}
}
verifyDevice(){
if(window.innerWidth <= 481){
this.setState({mobileDevice: true});
}else{
this.setState({mobileDevice: false});
}
}
att(){
let location = this.props.location.pathname;
switch(location){
case '/': // Sacola
this.props.addStep(1);
break;
case '/identification' || '/cadastro': // Identificação
this.props.addStep(2);
break;
case '/entrega': // Entrega
this.props.addStep(3);
break;
case '/pagamento': // Pagamento
this.props.addStep(4);
break;
}
}
componentDidUpdate(){
if(this.state.mobileDevice){
mMobile();
}
}
async componentDidMount(){
this.att();
this.verifyDevice();
const config = { attributes: true, childList: true, subtree: true };
if(window.innerWidth <= 481){
mMobile();
}
var fingerprint = await getFingerPrint();
this.props.addFinger(fingerprint);
this.setState({loading: true});
var cartData = () => {
if(getCookie('cart') !== undefined){
api.get('/cart/data')
.then((response) => {
if(response.data.status == 'success'){
var { foto, vendedor, seller_label, nome, valor, valorantigo, produto_id, quantidade, presente} = response.data;
nome = decodeHtml(nome);
this.props.addCart({foto, nome, vendedor, seller_label, valor, valorantigo, produto_id, quantidade, presente});
this.setState({cartEmpty: false, cart: {foto, vendedor, seller_label, nome, valor, produto_id, quantidade, presente}});
}else{
this.setState({cartEmpty: true});
}
this.setState({loading: false});
}).catch(() => {
setTimeout(() => {
cartData();
}, 3000);
});
}else{
this.setState({cartEmpty: true, loading: false});
}
};
cartData();
this.setState({loadingAuth: true});
if(getCookie('auth') !== undefined){
var fingerprint = this.props.fingerprint;
try{
const { nome_completo, endereco, num, bairro, complemento, referencia, cidade, estado, cep, celular, email } = jwt.decode(getCookie('auth'));
this.setState({authenticated: true, user: {nome_completo, endereco, num, bairro, complemento, referencia, cidade, estado, cep, celular, email}, loadingAuth: false});
}catch(err){
var userData = () => {
api.get('/user/data')
.then((response) => {
if(response.data.auth == true){
const { nome_completo, endereco, num, bairro, complemento, referencia, cidade, estado, cep, celular, email } = response.data.user_information;
this.setState({authenticated: true, user: {nome_completo, endereco, num, bairro, complemento, referencia, cidade, estado, cep, celular, email}});
var { cards } = response.data;
if(cards != 'no_have'){
//cards.forEach((el, index, arr) => {
// this.state.cards.push(arr[index]);
// if(index == cards.length - 1){
// this.setState({addedCard: true});
// }
//});
}
}
this.setState({loadingAuth: false});
}).catch(() => {
setTimeout(() => {
userData();
}, 3000);
});
}
userData();
}
}else{
this.setState({loadingAuth: false});
}
}
setAuth = async () => {
this.setState({loadingAuth: true});
if(getCookie('auth') !== undefined){
var fingerprint = this.props.fingerprint;
var getDadosA = () => {
api.get('/user/data')
.then((response) => {
if(response.data.auth == true){
const { nome_completo, endereco, num, bairro, complemento, referencia, cidade, estado, cep, celular, email } = response.data.user_information;
this.setState({authenticated: true, user: {nome_completo, endereco, num, bairro, complemento, referencia, cidade, estado, cep, celular, email}});
}
}).catch(() => {
setTimeout(() => {
getDadosA();
}, 3000);
})
}
getDadosA();
}
this.setState({loadingAuth: false});
}
render(){
const {cartEmpty, loading, device} = this.state;
if(this.state.blocked){
return '';
}
return <div>
<Header mobileDevice={this.state.mobileDevice} />
<div class={this.state.mobileDevice == false && this.props.location.pathname == '/comprovante' ? null : "App clearfix"}>
{loading ? ( <Loading /> ) : cartEmpty ? ( <EmptyCart />) :
<div>
<Switch>
<div>
<Route exact path="/">
<Cart trocarQuantidade={(quantidade) => { this.setState({cart: {...this.state.cart, quantidade}})}} deleteItem={() => this.setState({cartEmpty: true}, () => document.cookie = "cart=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/carrinho;")} />
</Route>
<Route path="/identification" render={() => (this.state.loadingAuth ? (<Loading />) : ( this.state.authenticated ? ( <Redirect to="/entrega" /> ) : (<Identification device={this.state.device} setAuth={this.setAuth} />)))} />
<Route path="/cadastro">
{this.props.email.length > 0 ? (<Cadastro setAuth={this.setAuth} mobileDevice={this.state.mobileDevice} />) : (<Redirect to="/identification"></Redirect>)}
</Route>
<Route path="/entrega" render={() => (this.state.loadingAuth ? (<Loading />) : ( this.state.authenticated ? ( <Entrega mobileDevice={this.state.mobileDevice} {...this.state.cart} {...this.state.user} />) : (<Redirect to="/identification?from=entrega" />)))} />
<Route path="/pagamento" render={() => (this.state.loadingAuth ? (<Loading />) : ( this.state.authenticated ? ( <Pagamento mobileDevice={this.state.mobileDevice} {...this.state.cart} cards={this.state.cards} {...this.state.user} removeCart={() => this.setState({cartEmpty: true}, () => document.cookie = "cart=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/carrinho;")} /> ) : (<Redirect to="/identification?from=pagamento" />)))} />
<Route path="/comprovante" render={() => (this.state.loadingAuth ? (<Loading />) : ( this.state.authenticated ? ( <Boleto mobileDevice={this.state.mobileDevice} enterPage={() => this.setState({out: true})} {...this.state.cart} {...this.state.user} /> ) : (<Redirect to="/identification?from=comprovante" />)))} />
<Route path="/imprimir" render={() => (this.state.loadingAuth ? (<Loading />) : ( this.state.authenticated ? ( <Imprimir mobileDevice={this.state.mobileDevice} enterPage={() => this.setState({out: true})} {...this.state.cart} {...this.state.user} /> ) : (<Redirect to="/identification?from=comprovante" />)))} />
<Route path="*" render={() => (<Redirect to="/" />)} />
</div>
</Switch>
</div>
}
</div>
<Footer />
</div>
}
}
const mapDispatchToProps = dispatch =>
bindActionCreators({ changeAuth, addRegister, addCart, addFinger, addStep }, dispatch);
const mapStateToProps = store => ({
step: store.stepState.info,
email: store.userState.email,
authenticated: store.authState.authenticated,
fingerprint: store.fingerState.fingerprint
});
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));
現在，當我從主頁按 go 到注冊頁面，從注冊頁面按 go 到 T&C 頁面時，如果我按瀏覽器后退按鈕，它會將我轉發到位於 / 路線的購物車。 我正在使用 react-router v5.2.0。
一切正常，直到我不使用 redux，因為我在我的項目中添加了 redux，這打破了瀏覽器后退按鈕。
這是我的組件
識別.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link, Redirect, withRouter} from "react-router-dom";
import { bindActionCreators } from 'redux';
import { addStep, updateData, changeAuth} from '../actions';
import api from '../services/api';
import CryptoJS from 'crypto-js';
import Fingerprint2 from '@fingerprintjs/fingerprintjs'
var w;
class Identification extends Component {
constructor(){
super();
this.state = {loading: false, email: '', redirect: false, senhaError: false, firstStepRegisterSuccess: false, emailLoginError: false, emailLoginSuccess: false, loginError: false, showPassword: false, redirectTo: 'cadastro', senha: '', register: {email: ''}, firstStepRegisterError: false, registerErrorMessage: '', redirect: false}
this.handleUserLogin = this.handleUserLogin.bind(this);
this.handlePassLogin = this.handlePassLogin.bind(this);
this.handleLogin = this.handleLogin.bind(this);
this.handleUserRegister = this.handleUserRegister.bind(this);
this.handleVerifyEmail = this.handleVerifyEmail.bind(this);
this.loginFacebook = this.loginFacebook.bind(this);
}
handleUserLogin = (e) => {
this.setState({email: e.target.value});
}
handlePassLogin = (e) => {
this.setState({senha: e.target.value});
}
handleUserRegister = (e) => {
this.setState({register: {email: e.target.value}});
}
handleVerifyEmailInput = async (email) => {
email = this.state.register.email;
if(validateEmail(email) == false){
this.setState({firstStepRegisterError: true, firstStepRegisterSuccess: false, registerErrorMessage: 'O e-mail não foi digitado corretamente.'});
}else{
this.setState({firstStepRegisterError: false, firstStepRegisterSuccess: true});
}
}
handleVerifyEmail = async (e) => {
e.preventDefault();
this.setState({loading: true});
let email = this.state.register.email;
if(validateEmail(email) == false){
this.setState({firstStepRegisterError: true, firstStepRegisterSuccess: false, registerErrorMessage: 'O e-mail não foi digitado corretamente.'});
}else{
await api.get(`/verificar_email/${email}`).then(() => {
this.props.updateData(email);
this.setState({firstStepRegisterError: false, firstStepRegisterSuccess: true, redirect: true, redirectTo: 'cadastro'});
}).catch(() => {
this.setState({firstStepRegisterError: true, firstStepRegisterSuccess: false, registerErrorMessage: 'Já existe uma conta com esse e-mail.'});
})
}
this.setState({loading: false});
}
handleLogin = async (e) => {
e.preventDefault();
this.setState({loading: true});
let formError = false;
let device, fingerprint;
if(this.state.device) device = this.state.device;
if(this.state.fingerprint) fingerprint = this.state.fingerprint;
if(validateEmail(this.state.email) == false && validateCpf(this.state.email) == false){
this.setState({emailLoginError: true, emailLoginSuccess: false});
formError = true;
}else{
this.setState({emailLoginError: false, emailLoginSuccess: true});
}
if(this.state.senha.length <= 0){
this.setState({senhaError: true});
formError = true;
}else{
this.setState({senhaError: false});
}
const secret_key = 'SECRET';
if(!this.state.fingerprint && !this.state.device){
let options = {};
await new Promise(resolve => {
Fingerprint2.get(options, function (components) {
let values = components.map(function (component) { return component.value })
device = CryptoJS.AES.encrypt(JSON.stringify(components), secret_key).toString();
fingerprint = CryptoJS.AES.encrypt(Fingerprint2.x64hash128(values.join(''), 31), secret_key).toString();
resolve();
})
});
this.setState({device, fingerprint});
}
let {email, senha} = this.state;
if(formError == false){
await api.post('/login', {email, senha, device, fingerprint}).then(() => {
this.props.setAuth();
this.setState({redirect: true, redirectTo: 'entrega'});
}).catch(() => {
this.setState({loginError: true});
})
}
this.setState({loading: false});
}
loginFacebook = () => {
this.setState({loading: true});
w = window.open(window.location.protocol + '//' + window.location.hostname + '/facebook.com','targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=620,height=545');
let verifyClosed = setInterval(() => {
if(w.closed){
clearInterval(verifyClosed);
this.setState({loading: false});
}
}, 1000);
w.addEventListener('message', (e) => {
let email = e.data;
this.props.updateData(email);
w.close();
this.setState({firstStepRegisterError: false, loading: false, redirect: true, redirectTo: 'cadastro_cfb'});
});
}
render(){
const firstStepRegisterError = this.state.firstStepRegisterError;
const registerErrorMessage = this.state.registerErrorMessage;
const loading = this.state.loading;
if(this.state.redirect == true){
if(this.state.redirectTo == 'cadastro'){
return <Redirect to="/cadastro" />
}else if(this.state.redirectTo == 'entrega'){
return <Redirect to="/entrega" />
}else if(this.state.redirectTo == 'pagamento'){
return <Redirect to="/pagamento" />
}else if(this.state.redirectTo == 'cadastro_cfb'){
return <Redirect to="/cadastro?fb=true" />
}
}
return <div className="Grid">
{loading ? ( <div class="LoadingBackground">
</path></svg>
</div>) : null}
<div className="LoginPage">
<div className="LoginPage-title">Identificação</div>
<div className="LoginPage-mainContainer">
<div className="LoginPage-leftContainer">
<div className="SignupBox">
<div className="LoginBox-title">Quero criar uma conta</div>
<form className="LoginBox-form" method="post">
<div className="FormGroup">
<label className="FormGroup-label" htmlFor="input-login-45495458">E-mail</label>
<div className="FormGroup-inputGroup FormGroup-inputGroup--long">
<input type="email" className={firstStepRegisterError ? ('FormGroup-input FormGroup-input--withError') : ('FormGroup-input')} onBlur={(e) => {if(e.target.value.length >= 1){ this.handleVerifyEmailInput(e.target.value) }}} onChange={(e) => { this.handleUserRegister(e); if(e.target.value.length <= 0){ this.setState({firstStepRegisterError: false, firstStepRegisterSuccess: false})}}} onFocus={() => this.setState({firstStepRegisterError: false, firstStepRegisterSuccess: false})} id="input-login-45495458" name="login" />
{firstStepRegisterError ? <p class="FormGroup-errorMessage" id="aria-login-3cb8797a">{registerErrorMessage}</p> : null}
</div>
<div className="FormGroup-feedback">{this.state.firstStepRegisterSuccess ? <svg xmlns="http://www.w3.org/2000/svg" width="35pt" height="35pt" viewBox="0 0 35 35" className="Success"><path d="M14.523 29.73a4.129 4.129 0 01-2.93-1.214L1.34 18.262a4.14 4.14 0 010-5.856 4.145 4.145 0 015.86 0l7.323 7.32L27.816 6.5a4.145 4.145 0 015.86 0 4.145 4.145 0 010 5.86L17.453 28.515a4.136 4.136 0 01-2.93 1.214zm0 0" stroke="#fff" strokeMiterlimit={10} strokeWidth=".059" /></svg> : null}</div>
</div>
<button className="LoginBox-form-continue" onClick={this.handleVerifyEmail} data-ga="{"category": "Login", "action": "Criar cadastro", "label": "Selecionou"}">
<span className="mobile-hidden">Continuar</span> <span className="mobile-only">Criar minha conta</span>
</button>
</form>
<div className="LoginBox-help mobile-hidden">
Dúvidas? <a href="http://www.magazineluiza.com.br/central-de-atendimento/" target="_blank" rel="noopener" data-ga="{"category": "Login", "action": "Fale conosco", "label": ""}">fale conosco</a>
</div>
</div>
</div>
<div className="LoginPage-rightContainer">
<div>
{/* react-empty: 695 */}{/* react-empty: 696 */}{/* react-empty: 697 */}
<div className="LoginBox">
<div className="LoginBox-title">Já sou cliente</div>
<form id="LoginBox-form" className="LoginBox-form" method="post" onSubmit={this.handleLogin}>
<div className="FormGroup">
<label className="FormGroup-label" htmlFor="input-login-2403024b">E-mail, CPF ou CNPJ</label>
<div className="FormGroup-inputGroup FormGroup-inputGroup--long">
<input onFocus={() => this.setState({emailLoginError: false, emailLoginSuccess: false})} onChange={this.handleUserLogin} onBlur={(e) => {let login = e.target.value; if(validateEmail(login) == false && validateCpf(login) == false){ this.setState({emailLoginError: true, emailLoginSuccess: false})}else{ this.setState({emailLoginError: false, emailLoginSuccess: true})}}} id="input-login-2403024b" className={this.state.emailLoginError ? ('FormGroup-input FormGroup-input--withError') : ("FormGroup-input")} placeholder autoComplete="username" name="login" />
{this.state.emailLoginError ? (<div class="FormGroup-errorMessage">Insira um CPF, CNPJ ou E-mail válido.</div>) : null}
</div>
<div className="FormGroup-feedback">{this.state.emailLoginSuccess ? <svg xmlns="http://www.w3.org/2000/svg" width="35pt" height="35pt" viewBox="0 0 35 35" className="Success"><path d="M14.523 29.73a4.129 4.129 0 01-2.93-1.214L1.34 18.262a4.14 4.14 0 010-5.856 4.145 4.145 0 015.86 0l7.323 7.32L27.816 6.5a4.145 4.145 0 015.86 0 4.145 4.145 0 010 5.86L17.453 28.515a4.136 4.136 0 01-2.93 1.214zm0 0" stroke="#fff" strokeMiterlimit={10} strokeWidth=".059" /></svg> : null}</div>
</div>
<div className="FormGroup">
<label className="FormGroup-label" htmlFor="input-password-da669599">Senha</label>
<div className="LoginBox-input-password FormGroup-inputGroup LoginBox-input-password FormGroup-inputGroup--small">
<input type={this.state.showPassword ? ("text") : ("password")} id="input-password-da669599" onFocus={() => {this.setState({senhaError: false})}} onBlur={(e) => {if(e.target.value.length <= 0){ this.setState({senhaError: true})}else{ this.setState({senhaError: false})}}} onChange={this.handlePassLogin} className={this.state.senhaError ? ('FormGroup-input FormGroup-input--withError') : ('FormGroup-input')} name="password" />
{this.state.senhaError ? (<div class="FormGroup-errorMessage">Insira a senha.</div>) : null}
</div>
<div className="FormGroup-children">
<label className="LoginBox-form-label-show-password">
<input type="checkbox" className="mobile-hidden" defaultValue="on" onChange={(e) => {if(e.target.checked == true){this.setState({showPassword: true})}else{ this.setState({showPassword: false})}}}/><span className="mobile-hidden"> Ver senha </span>
<svg className="mobile-only" width={24} height={24} viewBox="0 0 24 24">
<path fill="#8C8C8C" d="M12 5a11.83 11.83 0 00-11 7.5 11.82 11.82 0 0022 0A11.83 11.83 0 0012 5zm0 12.5a5 5 0 115-5 5 5 0 01-5 5zm0-8a3 3 0 103 3 3 3 0 00-3-3z" />
</svg>
</label>
</div>
</div>
{this.state.loginError ? <div class="LoginBox-form-error--unique">Verifique o login e a senha para continuar.</div> : null}
<button className="LoginBox-form-continue" onClick={this.handleLogin} data-ga="{"category": "Login", "action": "Continuar", "label": "Clique"}">Continuar</button>
</form>
<div className="LoginBox-help">
Esqueci meu <a href="#" data-ga="{"category": "Login", "action": "Esqueci email", "label": "Selecionou"}">e-mail</a> ou a <a href="#" data-ga="{"category": "Login", "action": "Esqueci senha", "label": "Selecionou"}">senha</a>
</div>
</div>
<div className="Captcha">
<div id="g-recaptcha">
<div className="grecaptcha-badge" data-style="bottomright" style={{width: '256px', height: '60px', display: 'block', transition: 'right 0.3s ease 0s', position: 'fixed', bottom: '14px', right: '-186px', boxShadow: 'gray 0px 0px 5px', borderRadius: '2px', overflow: 'hidden'}}>
<div className="grecaptcha-logo">
<iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LduICwUAAAAAKAKuy-fjzvHxJFX9hs6MQHkuJGR&co=aHR0cHM6Ly9zYWNvbGEubWFnYXppbmVsdWl6YS5jb20uYnI6NDQz&hl=pt-BR&v=IU7gZ7o6RDdDE6U4Y1YJJWnN&size=invisible&cb=5pllwlbfztpc" width={256} height={60} role="presentation" name="a-rcyfduoztipf" frameBorder={0} scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox" />
</div>
<div className="grecaptcha-error" />
<textarea id="g-recaptcha-response" name="g-recaptcha-response" className="g-recaptcha-response" style={{width: '250px', height: '40px', border: '1px solid rgb(193, 193, 193)', margin: '10px 25px', padding: '0px', resize: 'none', display: 'none'}} defaultValue={""} />
</div>
<iframe style={{display: 'none'}} />
</div>
</div>
<div id="GoogleOneTap" />
</div>
</div>
</div>
<div className="LoginPage-socialContainer">
<div className="SocialLoginBox">
<span className="SocialLoginBox--InformationLogin">Use sua rede social para se conectar*</span>
<button className="SocialLogin-Facebook" aria-label="Fazer login com Facebook">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 20" className="SocialLoginBox-button--FB">
<g fill="none">
<path fill="#FFF" d="M18.896 0h-17.8A1.104 1.104 0 000 1.104v17.8A1.104 1.104 0 001.104 20h9.58v-7.734h-2.6V9.238h2.6V7.01c0-2.582 1.578-3.99 3.882-3.99.778-.003 1.555.037 2.328.12v2.7h-1.588c-1.254 0-1.498.6-1.498 1.47v1.928H16.8l-.4 3.028h-2.6V20h5.096c.61 0 1.104-.494 1.104-1.104v-17.8A1.104 1.104 0 0018.896 0z" />
<path fill="#4267B2" d="M13.847 20v-7.743h2.657l.408-3.032h-3.065v-1.93c0-.875.25-1.472 1.53-1.472H17V3.12A21.796 21.796 0 0014.622 3c-2.354 0-3.966 1.402-3.966 3.995v2.23H8v3.032h2.656V20h3.191z" />
</g>
</svg>
<span className="SocialLoginBox-button--ButtonNameFB" onClick={this.loginFacebook}> Facebook </span>
</span>
</button>
</div>
<div className="GenericFooter">
<div>
{/* react-text: 751 */}*Seus dados serão preservados e nada será publicado em sua timeline. Serviço válido somente para pessoas fisicas.{/* /react-text */}
<br />
{/* react-text: 753 */}Em caso de dúvidas, acesse nossa central de atendimento.{/* /react-text */}
</div>
</div>
</div>
</div>
</div>
}
}
const mapDispatchToProps = dispatch =>
bindActionCreators({ addStep, updateData, changeAuth }, dispatch);
export default withRouter(connect(null, mapDispatchToProps)(Identification));
我刪除了一些功能，因為它達到了字符數限制。 但它們無關緊要.. 組件更多，但架構相同，所以我只發布一個供您了解。
1 個解決方案
解決方案1
0 2020-11-13 00:48:00
問題出在
<Route path="*" render={() => (<Redirect to="/" />)} />
我刪除它並解決了。 但問題是：當找不到路由時，我將其作為問題出在該部分。
React router v5 with history - 路由上沒有顯示內容
[英]React router v5 with history - no content shown on routing
反應路由器 v5 歷史推送更新 url 但沒有重新渲染組件
[英]React router v5 history push updates url but no rerender of component
在組件外部的 react-router v5 中以編程方式訪問歷史記錄（history.push 等）
[英]Programmatic access to history (history.push etc) in react-router v5 outside of components
在這種情況下如何使用“history.push”？ 反應路由器dom V5
[英]How Can I Use "history.push" In This Situation? react-router-dom V5
react-router-dom v5 - 鏈接有效，但 Redirect 和 history.push() 無效
[英]react-router-dom v5 - Link works, but Redirect and history.push() do not
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
React Router V4 HashRouter不存儲歷史記錄
如何在 React Router v5 中推送到歷史記錄？
React router v5 with history - 路由上沒有顯示內容
反應路由器 v5 歷史推送更新 url 但沒有重新渲染組件
在組件外部的 react-router v5 中以編程方式訪問歷史記錄（history.push 等）
React Router v5 的問題
在這種情況下如何使用“history.push”？ 反應路由器dom V5
react-router-dom v5 - 鏈接有效，但 Redirect 和 history.push() 無效
如何在react-router v5中使用history.push傳遞對象？
反應路由器 dom v5 history.push 不呈現新頁面
相關標簽