代码之家 › 专栏 › 技术社区 › Black

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

react-router-dom react-router reactjs javascript

Black · 技术社区 · 7 年前

redirect URL将更改,但的新页面 Login

应用程序.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')
);

6 回复 | 直到 7 年前

hannad rehman 7 年前

如果您正在使用 react-router-dom withRouter 提供单位 .

所有组件的用法都应该从render返回。只有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)

Waldo Saccaco 7 年前

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

祝你好运!

Nilanka Manoj 7 年前

不要在这里这样做,使用您的认证中间件根据授权/权限进行重新指示。

Yoan 7 年前

你错过了几次退货。渲染函数必须返回路由,并且路由必须包装在某个元素上。

  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
}

Sathya Sherin 5 年前

-1

Shubham Khatri 7 年前

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

在您的例子中,应用程序组件似乎没有接收路由参数作为道具。您可以简单地将其呈现为默认路由或使用 withRouter 无法包装应用程序组件

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

-1

Eugene Tsakh 7 年前

好像你不回你的路线。尝试将您的路由移动到您正在初始化路由器的位置,并用应用程序包装它:

<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>

然后在应用程序组件中,只需使用子级来呈现页面内容:

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