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

Question

我有一个页面可以验证用户并在验证成功后将他们重定向到登录页面。但是，使用 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>
    );
}

Index.js

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

编辑：根据答案进行了更改，但现在 URL 未更改且页面未呈现

Answer 1

您需要删除组件的 "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;
  }} />
}

运气好！

Answer 2

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

Answer 3

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

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

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

Answer 4

您错过了几个 return。您的渲染函数必须 return 您的路线，并且您的路线必须包裹在某些元素上。

  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
}

Answer 5

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

并且所有组件使用都应该从渲染中返回。然后只有 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)

Answer 6

您似乎没有 return 您的路线。尝试将你的路由移动到你初始化路由器的地方并用 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>
    );
  }

Answer 7

确保路由标签中的 "component" 和 "path" 关键字应该是小写字母（component 而不是 Component

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

Redirect changing page URL but not rendering new page

javascript

reactjs

react-router

react-router-dom