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

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

，所有组件的用法都应从render返回。那么只有反应知道要渲染什么。

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 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;
  }} />
}

好运！

Answer 3

请不要在此处执行此操作，请使用您的身份验证中间件根据授权/权限进行重定向。

Answer 4

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

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

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

Answer 5

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

  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 6

确保路由标签中的“ component”和“ path”关键字应使用小写字母（Component代替Component）

Answer 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>
    );
  }

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

7 个答案: