如何从 ReactJS 重定向到内部和外部页面

Question

如果不满足特定条件，我是新来的反应并尝试将用户路由到新页面（内部和外部）。我下面的 sn-p 有效，但我不确定这是正确的方法。

请您看一下，如果有更有效的方法可以告诉我。我想在 URL 没有参数或参数无效时自动重定向用户。

谢谢

export default class extends Component {
  static getInitialProps({ query: { city, state } }) {
    return { city: city, state: state };
  }

  componentDidMount() { 
    if (!this.props.city) {
       Router.push('INTERNAL URL')
    } else {
        if (this.props.city === "augusta") {
          window.location = 'https://www.google.com'
        }
    }
   }

 render() {
     if (!this.props.city ||this.props.city === "augusta"){
       return null
     }else{
        return(
           <div>...</div>
        )
     }

  }
}

Answer 1

您可以尝试使用react-router。 react-router。试试看是否可行

import { Route } from 'react-router';

export default YourPageComponent extends React.Component {

    //no need to use static method as react-router provides a props called 'match' allows you get back param from URL
    static getInitialProps({ query: { city, state } }) {
      return { city: city, state: state };
    }

    componentDidMount = () => {
       this.handleRedirect();
    }

    //put this function in the related component in componentDidMount
    handleRedirect = () => {

       const {match: { params }} = this.props;
       console.log(params.state, params.city);

       //do your logic here
       if (params.city !== "augusta"){
           window.location.href = 'https://google.com'; 
           return null;
       }
    }


  }

在 app.js 中

   render() {
       <Switch>
           {/* take URL path as a condition to go to which page */}
           <Route path='/:city/:state' component={YourPageComponent}/>
           <Route path='/' component={/* put your default component here */}/>
        </Switch>
    }

Answer 2

您可以使用 react-router-dom。来自https://reacttraining.com/react-router/web/guides/quick-start 的示例：

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Answer 3

我建议你使用 react-router-dom。 在应用程序顶部设置路由器后，您可以在子组件中使用路由器方法。

<Router>
 <Switch>
   <Route exact path='/' render={props=>(<Component {...props}/>)}/>
 </Switch>
</Router>

在子组件内部，您可以使用 history.props.push() 方法来避免重新渲染。

export default class extends Component {
  static getInitialProps({ query: { city, state } }) {
    return { city: city, state: state };
  }

  componentDidMount() { 
    if (!this.props.city) {
       this.props.history.push('to your route')
    } else {
        if (this.props.city === "augusta") {
          window.location = 'https://www.google.com'
        }
    }
   }

 render() {
     if (!this.props.city ||this.props.city === "augusta"){
       return null
     }else{
        return(
           <div>...</div>
        )
     }

  }
}