注意:我对React和Meteor相当新,所以在回答我的问题时请非常具体。
我正在尝试使用meteor制作短信应用并做出反应,但是,我使用的教程是使用React v3,我想知道如何在v4中做同样的事情,即使用browserHistory.push()或browserHistory.replace()将用户发送到另一个页面。到目前为止,我正在做一个页面,他们可以将自己的名字设置为他们想要的任何内容,然后将它们链接到聊天页面。我知道有很多关于这方面的文章和文档,但它们都是非常复杂的例子。如果可以,你能告诉我最基本的方法,我可以将某人重定向到另一个页面。
SetName.js:
import React from "react";
import { BrowserRouter } from 'react-router-dom'
export default class SetName extends React.Component{
validateName(e){
e.preventDefault();
let name = this.refs.name.value;
if(name){
console.log(name);
}
this.props.history.push('/asd')
}
render(){
return(
<div>
<form onSubmit={this.validateName.bind(this)}>
<h1>Enter a Name</h1>
<input ref="name" type="text"/>
<button>Go to Chat</button>
</form>
</div>
)
}
}
main.js
import React from "react";
import ReactDOM from "react-dom";
import {Meteor} from "meteor/meteor";
import {Tracker} from "meteor/tracker";
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import {Texts} from "./../imports/api/Text";
import App from "./../imports/ui/App";
import Name from "./../imports/ui/Name";
import NotFound from "./../imports/ui/NotFound";
import SetName from "./../imports/ui/SetName";
Meteor.startup(() => {
Tracker.autorun(() => {
let texts = Texts.find().fetch();
const routes = (
<BrowserRouter>
<Switch>
<App path="/chat" texts={texts}/>
<SetName path="/setName" />
<Route component={NotFound}/>
</Switch>
</BrowserRouter>
);
ReactDOM.render(routes, document.getElementById("app"));
});
});
答案 0 :(得分:7)
如果您已经在使用react router 4,那么您只需执行以下操作即可获得组件中的路由器历史记录。确保你在路由器中渲染组件,否则你必须以不同的方式进行。你可以通过打印this.props来检查 在您的组件中。如果它有历史记录,那么请执行以下操作,否则从下面执行下一个逻辑。
this.props.history.push('your routing location').
如果您的组件不在路由器内,请执行以下操作
import { withRouter } from 'react-router';
... your react component
export default withRouter(yourcomponent);
这样它会将组件中的路由器历史记录作为道具注入。