它有助于实现您的想法吗?我只是分享你在反应中使用路由的想法react-router-dom
应用程序.js
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import SignUp from "./signUp";
import Login from "./login";
import Landing from "./landing";
class App extends Component {
render() {
return (
<Router>
<div id="container">
<div>
<Link to="/">Landing</Link>
<Link to="/signup">Sign Up</Link>
<Link to="/login">Login</Link>
</div>
<Switch>
<Route exact path="/signup" component={SignUp} />
<Route exact path="/login" component={Login} />
<Route exact path="/" component={Landing} />
</Switch>
</div>
</Router>
);
}
}
export default App;
你应该已经创建了你的功能组件/类组件,你可以相应地导入和使用
类组件的更新
一旦从一个组件路由到另一个组件,每个组件都将加载自己的state
和props
我已经把我的类组件放在这里了,你必须确保所有 App.js、landing.jsx、signUp.jsx 和 login.jsx 都在同一个文件夹位置
登陆.jsx
import React, { Component } from "react";
class Landing extends Component {
state={}
render() {
return (
<div>
<h1>Landing page</h1>
</div>
);
}
}
export default Landing;
注册.jsx
import React, { Component } from "react";
class SignUp extends Component {
state={}
render() {
return (
<div>
<h1>Sign Up page</h1>
</div>
);
}
}
export default SignUp;
登录.jsx
import React, { Component } from "react";
class Login extends Component {
state={}
render() {
return (
<div>
<h1>Login page</h1>
</div>
);
}
}
export default Login;
另一种方法是push
在类组件内单击按钮时使用方法,在这两种情况下,路由都应该存在
<button onClick={()=> this.props.history.push('/')} ></button>
或者
<button onClick={()=> this.props.history.push('/signup')} ></button>