javascript - 按下按钮时参考另一个网页

Question

目标：
按下按钮（id=hello）进入网页test3

问题：
当我按下按钮按钮时，为了与 React js 代码相关的工作，我遗漏了代码的哪一部分？

信息：
*我是 reactJS 的新手

Stackblitz：
https ://stackblitz.com/edit/redirect-to-default-route-reactjs-8qa9ah?file=index.js

---

import React, { Component } from "react";
import { render } from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect
} from "react-router-dom";
import Home from "./Home";
import Test1 from "./Test1";
import Test2 from "./Test2";
import Test3 from "./Test3";
import Test11 from "./test11";

class App extends Component {
  constructor() {
    super();
    this.state = {
      isUserAuthenticated: true
    };
  }

  sayHello(link) {
    alert(`hello, ${link}`);

    return <Redirect to="/test3" />;
  }

  render() {
    return (
      <div>
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/home">Home</Link>
              </li>
              <li>
                <Link to="/test1">Test 1</Link>
              </li>
              <li>
                <Link to="/test2">Test 2</Link>
              </li>
              <li>
                <Link to="/test3">Test 3</Link>
              </li>
            </ul>

            <button
              id="hello"
              value="test3"
              onClick={e => this.sayHello(e.target.value)}
            >
              Go to page test3
            </button>

            <hr />
            <Switch>
              <Route
                exact
                path="/"
                render={() => {
                  return this.state.isUserAuthenticated ? (
                    <Redirect to="/home" />
                  ) : (
                    <Redirect to="/test1" />
                  );
                }}
              />
              <Route exact path="/home" component={Home} />
              <Route exact path="/test1/test11" component={Test11} />
              <Route exact path="/test1" component={Test1} />
              <Route exact path="/test2" component={Test2} />
              <Route exact path="/test3" component={Test3} />
            </Switch>
          </div>
        </Router>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

标签： javascriptreactjs

Answer 1

您可以使用道具中的历史对象，并且应该将您的位置推送到所需的路径：

注意：在导出 App 组件时，您可能必须使用 withRouter()。

sayHello(link) {
    alert(`hello, ${link}`);
    this.props.history.push("/test3")
  }