重定向更改页面 URL 但不呈现新页面答案

【问题标题】：Redirect changing page URL but not rendering new page重定向更改页面 URL 但不呈现新页面
【发布时间】：2019-03-09 08:37:46
【问题描述】：

我有一个页面可以验证用户并在验证成功时将他们重定向到登录页面。但是，使用 redirect 的 URL 会发生变化，但不会呈现 Login 的新页面。如何让新页面呈现？

App.js

var child;

render() {
if (this.state.toLogin && !this.state.mounted) {
    <Route exact path="/Login" component={Login} />;
    <Route exact strict path="/" render={({location}) => {
       if (location.pathname === window.location.pathname) {
             return <Redirect to="/Login"/>;
        }
    return null;
}}

return(
    <div className="App">
        <ReactCSSTransitionGroup
            transitionName="remove"
            transitionEnterTimeout={100}
            transitionLeaveTimeout={100}>
                {child}
        </ReactCSSTransitionGroup>
    </div>
    );
}

索引.js

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

编辑：根据答案进行了更改，但现在 URL 没有改变，页面也没有呈现

【问题讨论】：

stackblitz.com/edit/react-router-starter-rb2cvc?file=index.js 这按预期工作，你能说明你的问题是什么吗？
如何为var child 赋值？你能展示App的完整代码库吗？
查看我的答案@black
事实证明我没有正确渲染东西，但感谢所有答案
如果您因为试图重定向到外部页面而来到这个问题，那么这个问题对我有帮助：stackoverflow.com/questions/42914666/react-router-external-link/…

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

如果您使用 react-router-dom 将组件导出包装在 withRouter 提供的 react-router-dom 中。

并且所有组件的使用都应该从渲染返回。然后只有 react 知道要渲染什么。

import React from 'react'
import { withRouter, Redirect } from 'react-router-dom';

class App extends React.Component {

render() {
if (this.state.toLogin && !this.state.mounted) {
  return (
    <React.Fragment>
      <Route exact path="/Login" component={Login} /> 
      <Route exact strict path="/" render={({location}) => {
          if (location.pathname === window.location.pathname) {
              return <Redirect to="/Login"/>;
          }
          return null;
      }} />
  </React.Fragment>
  );
}

return (
  <div className="App">
    <ReactCSSTransitionGroup
        transitionName="remove"
        transitionEnterTimeout={100}
        transitionLeaveTimeout={100}>
            {child}
    </ReactCSSTransitionGroup>
</div>
)}

}
export default withRouter(App)

【讨论】：

毫无疑问，你的答案是正确的。这也是我该死的问题，withRouter 帮助我。但我不知道为什么，为什么withRouter HOC 解决了这个问题？
@AngelHotxxx，我在回答中已经提到为什么withRouter能解决问题，你可以查一下
@AngelHotxxx for react-router-dom 它需要一些路由相关的道具。用于更改浏览器路由并将 url 添加到此 withRouter HOC 给出的历史对象等。

【解决方案2】：

您需要删除组件的“exact”和“component={Login}”并添加新组件<Route exact path="/Login" component={Login} />

render() {
  if (this.state.toLogin && !this.state.mounted) {
      <Route exact path="/Login" component={Login} /> 
      <Route exact strict path="/" render={({location}) => {
          if (location.pathname === window.location.pathname) {
               return <Redirect to="/Login"/>;
          }
          return null;
  }} />
}

运气！

【讨论】：

我尝试了更改，但仍然看不到页面呈现。我已经添加了整个App.js，以防有什么干扰

【解决方案3】：

这里不要这样做，使用你的认证中间件根据授权/权限做重定向。

【讨论】：

【解决方案4】：

您错过了几次退货。您的渲染函数必须返回您的路线，并且您的路线必须包装在某些元素上。

  render() {
    if (this.state.toLogin && !this.state.mounted) {
      return (
        <React.Fragment>
          <Route exact path="/Login" component={Login} /> 
          <Route exact strict path="/" render={({location}) => {
              if (location.pathname === window.location.pathname) {
                  return <Redirect to="/Login"/>;
              }
              return null;
          }} />
      </React.Fragment>
      );
    }

    return //Something according to your logic
}

【讨论】：

【解决方案5】：

确保路由标签中的“组件”和“路径”关键字应该是小写字母（组件而不是组件

【讨论】：

【解决方案6】：

为了使路由工作，使用路由的组件必须接收路由参数

在您的情况下，App 组件似乎没有接收 Route 参数作为道具。您可以简单地将其渲染为默认路由或使用withRouter HOC 来包装 App 组件

ReactDOM.render(
  <BrowserRouter>
    <Route component={App} />
  </BrowserRouter>,
  document.getElementById('root')
);

【讨论】：

【解决方案7】：

好像你没有返回你的路线。尝试将您的路由移动到您正在初始化路由器的地方并用 App 包装它：

<Router>
  <Route component={App}>
    <Route exact path="/Login" component={Login} />;
    <Route exact strict path="/" render={({location}) => {
       if (location.pathname === window.location.pathname) {
         return <Redirect to="/Login"/>;
       }
       return null;
    }/>
  </Route>
</Router>

然后在您的 App 组件中只使用子组件来呈现页面内容：

render() {
    return (
      <div className="App">
        <ReactCSSTransitionGroup
          transitionName="remove"
          transitionEnterTimeout={100}
          transitionLeaveTimeout={100}
        >
                {this.props.children}
        </ReactCSSTransitionGroup>
      </div>
    );
  }

【讨论】：