我有两个组件。在第一个组件中，我有一个按钮。单击按钮时，我想导航到另一个组件或另一个页面。
这是我的代码 http://codepen.io/naveennsit/pen/pymqPa?editors=1010
class App extends React.Component {
handleClick(){
alert('---');
}
render() {
return <button onClick={this.handleClick}>hello</button>
}
}
class Second extends React.Component {
render() {
return <label>second component</label>
}
}
React.render( <App /> , document.getElementById('app'))
这里有两种方法，都很容易。
方法一：使用 React Router
确保您已经在项目中的某处设置了路线。它至少应该包含以下信息：路径和组件。它应该像这样定义：
import YourComponent from "./path/of/your/component";
<Route path="/insert/your/path/here" component={YourComponent} />
接下来，您要更新您的handleClick函数以使用Linkfrom react-router-dom（如果您还没有使用，则可能必须安装此包npm i react-router-dom）。
删除这个（你的handleClick函数不需要它Link）：
handleClick(){
alert('---');
}
render() {
return <button onClick={this.handleClick}>hello</button>
}
}
现在将您的渲染方法更改为：
render() {
return (
<div>
<Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
</div>
);
}
}
给Link相同的类名，你将你的按键使其风格的按钮，而不是一个锚标记。
把它们放在一起。
//无论你的路由器在哪里你的路由
import YourComponent from "./path/of/your/component";
<Router>
<Route exact path="/insert/your/path/here" component={YourComponent} />
</Router>
//具有handleClick功能的组件
import { Link } from "react-router-dom";
class App extends Component {
render() {
return(
<div>
<Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
</div>
);
}
}
方法二：使用 window.open
仍然确保你有如上设置的路线。这里的区别在于您不会使用Link这意味着您将需要您的handleClick功能。那将是唯一改变的事情。
改变这个：
handleClick(){
alert('---');
}
对此：
handleClick(){
window.open("/insert/your/path/here");
//this opens in a new tab (believe that is what the owner of the question wanted if not you can do window.location.href = "/insert/your/path/here".
}
而已。如果你想让你的路径动态化，这意味着它们包括诸如 id 或名称等变量。见下文。
动态路径
动态路径可以包括名称和 ID 或您想要的任何变量。您首先必须调整您的路线，然后相应地更改您的链接或位置。
将路由更改为：
<Route path="/insert/your/path/here/:name" component={YourComponent} />
注意冒号 (:)，这允许您通过变量在此处注入字符串。
更新您的链接：
<Link to={`/insert/your/path/here/${variableName}`}>hello</Link>
如果你使用window.open更新它像这样：
window.open(`/insert/your/path/here/${variableName}`);
这里有几点需要指出。你在等号后面使用括号，因为这告诉 React，嘿，我需要在这里输入一个变量。接下来注意反勾号 ` 这告诉 React 你正在使用一个字符串文字，这意味着嘿，我希望你将它解释为一个字符串，但首先在这里获取我的变量的值并为我转换为一个字符串。并且 ${} 允许您放置一个变量，以便 React 可以正确解释它。所以总的来说，react 将那行读为：将用户带到路径“/insert/your/path/here/valueOfVariablName”然后 React 检查该路径的路由并说嘿我们有一些东西是“/insert/your/path /here/:name" 所以 :name 必须等于 valueOfVariableName。希望这有点道理。您可以在控制台中验证动态路径。记录你的props。
您还可以在此处阅读有关 React-Router 的更多信息。原始链接：https : //medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
如果有人有更好的资源。请随时编辑我的答案或留下评论。
我希望这可以帮助遇到这个问题的任何人。顺便说一句，您也可以通过状态传递Link。如果您想知道如何做到这一点，请发布另一个问题。
以下是处理react导航的最佳方法
使用useHistory()来自react-router-dom
import React from 'react';
import { useHistory } from "react-router-dom";
function NavigationDemo() {
const history = useHistory();
const navigateTo = () => history.push('/componentURL');//eg.history.push('/login');
return (
<div>
<button onClick={navigateTo} type="button" />
</div>
);
}
export default NavigationDemo;
使用Link来自react-router-dom
import React from 'react';
import { Link } from "react-router-dom";
function NavigationDemo() {
return (
<div>
<Link to={{pathname: '/componentURL'}}>NavigateNow</Link>
</div>
);
}
export default NavigationDemo;
使用Redirect来自react-router
import { Redirect } from 'react-router';
<Redirect to='/componentURL' />
如果你想构建一个单一的应用程序，我建议使用React Router。否则你可以只使用普通的 Javascript：
window.location = 'newUrl';
我们应该使用如下结构
import history from 'services/History'
import { Router , Route, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<Router history={history} >
<div className="root">
<Switch>
<Route path="/" component={MainPage} exact />
<Route path="/dashboard" component={DashBoard} exact />
<Route path="/docs" component={Docs} exact />
<Route component={ErrorPage} />
</Switch>
</div>
</Router >
);
}
}
与 History.js 是
// google analytics
import ReactGA from 'react-ga';
import createHistory from 'history/createBrowserHistory';
ReactGA.initialize('UA-156453259-1');
ReactGA.pageview(window.location.pathname);
const history = createHistory();
history.listen((location) => {
ReactGA.set({
page: location.pathname,
});
ReactGA.pageview(location.pathname);
});
export default history;
我们使用 Link 导航到由 react-router 托管或路由的不同路由。
class App extends React.Component {
render(){
return (
<div>
<BrowserRouter>
<div>
<Route path="/" component={Landing} exact />
<Route path="/surveys" component={Dashboard}/>
</div>
</BrowserRouter>
</div>
)
}
}
对于上面的这两个组件，您可以使用 Link。
<Link to="/surveys">go to my surveys</Link>
但是，锚标记用于导航到完全不同的 HTML 文档。例如，对于 google oauth，如果您想登录用户，当用户单击“使用 Google 登录”按钮时，您必须导航到不同的 url。
<a href="/auth/google">Login with Google</a>