【问题标题】：Why is my Redirect react-router not working?为什么我的重定向反应路由器不起作用？
【发布时间】：2021-04-02 18:45:00
【问题描述】：

我正在尝试创建一个功能，用户将在其中创建用户名和密码，并在点击提交按钮后，他们将被重定向到登录页面。为此，我使用了 Redirect react-router。

唯一的问题是，当我单击提交按钮时，它不会将我重定向到另一个页面。我什至尝试过“/Link”，但也没有用。我做错了什么？

我的 App.js

class App extends Component {
  render() {
    return (
    <Router>      
      <div className="App">
        <Route exact path = '/' component={Account}/>
        <Route path="/SignIn" component={SignIn}/>

      </div>
    </Router>
    )
  }
}

和我的帐户组件

if (username.length < 1) {
     return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
    }
    if (password.length < 1) {
      return  document.getElementById('error').innerHTML = ("Please enter a Password or Username");
    }
     apiClient.signUp(username, password) .then((response) => {
       console.log(response)
       if (response === 'Account Created') {
          <Redirect to = "/SignIn"/>
        }
     })
       .catch(error => {
        console.log('Error found when creating meeting');
    })
 }

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

问题

你不能在回调中像这样返回 JSX。

if (username.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
if (password.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
apiClient.signUp(username, password) .then((response) => {
  console.log(response)
  if (response === 'Account Created') {
    <Redirect to="/SignIn"/> // <-- this isn't rendered into the DOM!
  }
})
  .catch(error => {
    console.log('Error found when creating meeting');
  })
}

Redirect 不会渲染到 DOM 中以产生任何效果。

解决方案

使用命令式导航

使用history 对象强制发出重定向到登录页面。

由于Account 直接由Route 组件渲染，它接收route props，history 将作为道具传递。路由推送是history.push，重定向是history.replace。使用replace 回调重定向到新路由。

if (username.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
if (password.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
apiClient.signUp(username, password) .then((response) => {
  console.log(response)
  if (response === 'Account Created') {
    props.history.replace("/SignIn"); // <-- imperatively redirect
  }
})
  .catch(error => {
    console.log('Error found when creating meeting');
  })
}

使用声明式导航

如果您仍然喜欢使用Redirect 组件，则需要从Account 组件返回并呈现它。无论组件是否应有条件地呈现Redirect，保持并设置一些状态。

const [doRedirect, setDoRedirect] = useState(false);

在上述回调中，如果满足重定向的条件，则更新状态。

if (username.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
if (password.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
apiClient.signUp(username, password) .then((response) => {
  console.log(response)
  if (response === 'Account Created') {
    setDoRedirect(true); // <-- set do redirect
  }
})
  .catch(error => {
    console.log('Error found when creating meeting');
  })
}

然后在组件返回有条件地渲染Redirect组件。

if (doRedirect) return <Redirect to="/SignIn"/>;

【讨论】：