按下按钮时,请参阅其他网页



目标:
按下按钮(id=hello(进入网页测试3

问题:
当我按下按钮时,为了与react js代码相关的工作,我缺少了代码的哪一部分?

信息:
*我是reactJS 的新手

堆栈闪电战:
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"));

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

注意:导出应用程序组件时,您可能必须使用withRouter((

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

最新更新