Javascript React JS如何在React中切换页面?
因此,从AngularJS背景来看,您有状态,每个状态都是一个单独的页面。例如,在社交网络中,你可以有一个状态和你的feed,一个状态和你的朋友列表,或者一个状态来查看个人资料等等。非常简单。对我来说没那么重要 假设我有一个2页的应用程序:一个产品列表和一个产品视图。在它们之间切换的最佳方式是什么 最简单的解决方案是拥有一个stateName为布尔值的对象 然后在render()函数中使用类似的内容Javascript React JS如何在React中切换页面?,javascript,reactjs,state,Javascript,Reactjs,State,因此,从AngularJS背景来看,您有状态,每个状态都是一个单独的页面。例如,在社交网络中,你可以有一个状态和你的feed,一个状态和你的朋友列表,或者一个状态来查看个人资料等等。非常简单。对我来说没那么重要 假设我有一个2页的应用程序:一个产品列表和一个产品视图。在它们之间切换的最佳方式是什么 最简单的解决方案是拥有一个stateName为布尔值的对象 然后在render()函数中使用类似的内容 return() { <div className="App"> //
return() {
<div className="App">
// Or you could use an if statement
{ this.state.productList && <ProductList /> }
{ this.state.productView && <ProductView product={this.state.product} /> }
</div>
}
return(){
//或者您可以使用if语句
{this.state.productList&&}
{this.state.productView&&}
}
很简单,对吧?当然,对于一个2页的应用程序来说
但是如果你有一个10、20、100页的大型应用程序呢?渲染的return()部分将是一团混乱,跟踪每个状态的状态将是疯狂的
我相信应该有更好的方法来组织你的应用程序。我尝试在谷歌上搜索,但找不到任何有用的东西(除了使用if-else或条件运算符)。我建议您检查以解决此问题 它允许您轻松创建如下自定义管线:
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic} />
<Route
exact
path={match.url}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
);
export default BasicExample;
从“React”导入React;
从“react Router dom”导入{BrowserRouter as Router,Route,Link};
常量基本示例=()=>(
-
家
-
关于
-
话题
);
常量Home=()=>(
家
);
const About=()=>(
关于
);
常量主题=({match})=>(
话题
-
使用React进行渲染
-
组件
-
道具诉国家
请选择一个主题。}
/>
);
常量主题=({match})=>(
{match.params.topicId}
);
导出默认基本示例;
对于文档和其他示例,如嵌套路由、签出。您提到的问题可以解决为如何在应用程序中处理路由。为此,请查看可用的解决方案,例如
解决此问题的另一种方法是,将呈现不同页面的逻辑转移到组件,然后根据作为道具传递的数据呈现页面。为此,您可以使用普通的旧JavaScript对象。另一种解决方案。index.js和product.js文件位于目录src\pages中。有关更多信息,请观看视频 文件App.js
import React from "react";
import {
BrowserRouter as Router,
Route,
Switch
} from "react-router-dom";
import Products from "./pages"
import Product from "./pages/product"
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" ><Products /></Route>
<Route path="/product"><Product /></Route>
</Switch>
</Router>
);
}
export default App;
从“React”导入React;
进口{
BrowserRouter作为路由器,
路线,,
转换
}从“反应路由器dom”;
从“/页”导入产品
从“/页面/产品”导入产品
常量应用=()=>{
返回(
);
}
导出默认应用程序;
文件index.js
import React from "react";
import {Link} from "react-router-dom";
const Products = () => {
return (
<div>
<h3>Products</h3>
<Link to="/product" >Go to product</Link>
</div>
);
};
export default Products;
从“React”导入React;
从“react router dom”导入{Link};
常数乘积=()=>{
返回(
产品
转到产品
);
};
出口默认产品;
文件product.js
import React from "react";
const Product = () => {
return (
<div>
<h3>Product !!!!!!</h3>
</div>
);
}
export default Product;
从“React”导入React;
常数乘积=()=>{
返回(
产品!!!!!!
);
}
导出默认产品;
那反应路由器
呢?反应路由器
绝对是您想要的!转到react router
并分别创建所有页面。从react router dom
文档复制/粘贴:(
import React from "react";
const Product = () => {
return (
<div>
<h3>Product !!!!!!</h3>
</div>
);
}
export default Product;