Javascript ReactJS 如何在 React 中的页面之间切换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49649767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS How do you switch between pages in React?
提问by Alexander Donets
So coming from an Angular/AngularJS background, you have states, and each state is a separate page. E.g. in a social network you can have a state with your feed, a state with a list of your friends, or a state to see a profile etc. Pretty straightforward. Not so much in React for me.
所以来自 Angular/AngularJS 背景，你有状态，每个状态都是一个单独的页面。例如，在社交网络中，您可以拥有您的提要状态、您朋友列表的状态或查看个人资料的状态等。非常简单。对我来说，React 没有那么多。
So let's say I have an application with 2 pages: a list of products and a single product view. What would be the best way to switch between them?
假设我有一个包含 2 页的应用程序：产品列表和单个产品视图。在它们之间切换的最佳方法是什么？
The simplest solution is to have an objectwhich has a stateNameand is a boolean
最简单的解决方案是让一个对象，其具有Statename的和是一个布尔
constructor() {
super();
this.state = {
productList: true,
productView: false
}
}
And then have something like that in your render()function
然后在你的render()函数中有类似的东西
return() {
<div className="App">
// Or you could use an if statement
{ this.state.productList && <ProductList /> }
{ this.state.productView && <ProductView product={this.state.product} /> }
</div>
}
Pretty straightforward, right? Sure, for a 2 page application that is.
很简单，对吧？当然，对于 2 页的应用程序。
But what if you have a large app with 10, 20, 100pages? The return()part of the render would be a mess, and it would be madness to track the status of every state.
但是，如果您有一个包含10、20、100页的大型应用程序怎么办？渲染的return()部分将是一团糟，跟踪每个状态的状态将是疯狂的。
I believe there should be a better way to organize your app. I tried googling around but I couldn't find anything useful (except for using if elseor conditional operators).
我相信应该有更好的方法来组织您的应用程序。我尝试使用谷歌搜索，但找不到任何有用的东西（除了使用if else或conditional operators）。
回答by manelescuer
I'd recommend you to check react-routerto solve this situation
我建议您检查react-router来解决这种情况
It easily allows you to create custom routes like this:
它允许您轻松创建这样的自定义路由：
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;
回答by Andrzej Smyk
The problem you have mentioned can be adressed as how to deal with routing within app. For that please take a look at available solutions such as react-router.
您提到的问题可以解决为如何处理应用程序内的路由。为此，请查看可用的解决方案，例如react-router。
Another way you can tackle this problem is by moving out rendering different pages logic to component with would then render page based on data passed as props. For that you can use plain, old JavaScript object.
解决此问题的另一种方法是将呈现不同页面的逻辑移出组件，然后根据作为 props 传递的数据呈现页面。为此，您可以使用普通的旧 JavaScript 对象。
回答by akulich
Another solution. Files index.js and product.js are in the directory src\pages. For more information watch video https://www.youtube.com/watch?v=hjR-ZveXBpQ.
另一种解决方案。文件 index.js 和 product.js 位于 src\pages 目录中。有关更多信息，请观看视频https://www.youtube.com/watch?v=hjR-ZveXBpQ。
file App.js
文件 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;
file index.js
文件 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;
file product.js
文件 product.js
import React from "react";
const Product = () => {
return (
<div>
<h3>Product !!!!!!</h3>
</div>
);
}
export default Product;
