我正在设计一个网站,就像Facebook或我认为可以正常工作的其他任何网站(公开:我是Web编程的新手),我想做的是路由到不同的路由,但其中一个路线,甚至更多,例如,当我转到新页面时,我需要将信息传递给下一个屏幕路线: 然后转到状态www.website.com/page1/page2),同时通过该州传递数据时说我想传递日期或名称,但我不希望它显示在url中。所以我发现react可以通过:
<Link {to={pathname:"/page2", state:{statetopass:datatopass}}}>
但是,当我进入(www.website.com/page1/page2)并通过状态时,只有刷新后我才能读取数据,我觉得很奇怪,我永远也看不到数据通过了,我读到历史是可变的,但我无法真正理解这可能与我的问题有关。 到目前为止,我尝试过的代码在这里:
<-------------------- APP ------------------------- ->
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, IndexRoute, HashRouter } from 'react-router-dom';
import Page1 from './Page1'
import Page2 from './Page2'
import { createBrowserHistory } from "history";
const history = createBrowserHistory();//idk if history should be here seems
class App extends Component {//to make no difference
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<Router>
<Switch>
<Route exact path='/hom/Page1' component={({ match }) => { return (<Page1 />) }} />
<Route exact path='/hom/Page1/Page2' component={({ match }) => { return (<Page2 />) }} />
</Switch>
</Router>
)
}
}
export default App;
<-------------------- Page1 ----------------->
import React, { Component } from 'react';
import { Link } from 'react-router-dom'
class Page1 extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div>
<Link to={{
pathname: `Page1/Page2`,
state: { dataneed: "testme" }
}}><button>Check </button>
</Link>
</div>
)
}
}
export default Page1;
<------------------------------- Page2 -------------- --------------->
import React, { Component } from 'react';
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
class Page2 extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
console.log(history.location.state.dataneed)
return (
<div>
<h1>{history.location.state.dataneed}</h1>
</div>
)
}
}
export default Page2;
因此,您首先会看到一个错误,但是一旦刷新,就会看到正在显示的文本。如果有人可以提出我正在尝试的最佳方法,并且如果有人可以帮助我阐明这件事,我将不胜感激。 PS:我使用的是4.3.1版本,那里有视频,但是那些似乎使用的版本低于4.0,并且完全不同。
答案 0 :(得分:0)
我相信这里的问题是React Router和History包的混合。 React Router使用历史记录,并且在其路由器中内置了历史记录,因此无需显式使用createBrowserHistory
或历史记录中的任何内容。具体来说,问题是state
从React Router传递到Link
,但是随后您尝试从createBrowserHistory()
对象访问数据。
要解决此问题并使代码更整洁,您可以采取的措施基本上是不直接使用createBrowserHistory
,而是依靠React Router的内置历史记录。可以通过props.location
,props.history
和props.match
访问路由数据,这些数据从React Router注入到包裹在高阶组件withRouter
中的任何组件中。>
它将是什么样子:
在index.js中:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), document.getElementById('root'));
在App.js中:
import React, { Component } from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import Page1 from './Page1'
import Page2 from './Page2'
class App extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
{/* Note no need for a Router because we wrapped the App component in the BrowserRouter in index.js */}
<Switch>
{/* Note the component attribute can be simplified */}
<Route exact path='/hom/Page1' component={ Page1 } />
<Route exact path='/hom/Page1/Page2' component={ Page2 } />
</Switch>
)
}
}
export default withRouter(App);
第1页很好。
在第2页中:
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class Page2 extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
const { dataneed } = this.props.location.state;
return (
<div>
<h1>{ dataneed }</h1>
</div>
)
}
}
export default withRouter(Page2);
希望这会有所帮助,如果您有任何疑问,请告诉我!