- 首页
- 前端开发
- 路由到不同的页面[react-router v4]
路由到不同的页面[react-router v4]
[英] Route to different page[react-router v4]
本文介绍了路由到不同的页面[react-router v4]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 react router v4 进行路由.有一种情况，当点击产品时，我想在横幅下方显示产品，但是当点击添加餐厅时，我想在不同的页面中显示它，而不是在横幅下方的同一页面中显示它.我如何在 react router v4 上做到这一点?
这是我的代码(现在点击添加餐厅时，表单框显示在同一页面的横幅下)
const 路由 = [{模式:'/餐厅'，组件:() =><内容/>},{ 模式:'/地址'，组件:() =><添加餐厅/>}];类 HomeScreen 扩展组件 {使成为() {返回 (<路由器><div><div className="ui 网格横幅"><div className="仅限平板电脑行"><div className="ui 倒置固定菜单导航栏页面网格"><Link to="/restaurant" className="brand item">Restaura</Link><Link to='/addrestaurant' className="item tab">添加餐厅</Link><Link to="/products" className="item tab">Products</Link>
<div className="ui 页面网格">{routes.map((route, index) => (<匹配键={索引}模式={route.pattern}组件={路由.组件}正好={route.exactly}/>))}
</路由器>);}}
解决方案
user-013948 的答案是正确的方法，只是错误的 react 路由器版本.
本质上，您想要做的是将任何应该只为某些匹配呈现的代码移动到由这些匹配呈现的组件中.
由于横幅只应由某些组件呈现，您应该为其创建一个组件:
const Banner = () =>(<div className="ui 网格横幅"><div className="仅限平板电脑行"><div className="ui 倒置固定菜单导航栏页面网格"><Link to="/restaurant" className="brand item">Restaurant</Link><Link to='/addrestaurant' className="item tab">添加餐厅</Link><Link to="/products" className="item tab">Products</Link>
)
然后，任何应该显示横幅的组件都应该包含它:
const Content = () =>(<div><横幅/>{/* 其他内容 */})
然后，当您渲染项目时，只有当横幅是
const App = () =>(<路由器><div><Match pattern='/restaurant' component={Content}/><Match pattern='/addrestaurant' component={AddRestaurant}/></路由器>)
I am using react router v4 for routing. There is a scenario that when products is clicked i want to show products just beneath banner but when add restaurant is clicked, instead of showing it in the same page beneath banner, i want to show it in different page. How can i do it on react router v4?
Here is my code (Right now when add restaurant is clicked, form box is shown on same page under banner)
const routes = [
{
pattern: '/restaurant',
component: () => <Content />
},
{ pattern: '/addrestaurant',
component: () => <AddRestaurant />
}
];
class HomeScreen extends Component {
render() {
return (
<Router>
<div>
<div className="ui grid banner">
<div className="computer tablet only row">
<div className="ui inverted fixed menu navbar page grid">
<Link to="/restaurant" className="brand item">Restaura</Link>
<Link to='/addrestaurant' className="item tab">Add Restaurant</Link>
<Link to="/products" className="item tab">Products</Link>
</div>
</div>
</div>
<div className="ui page grid">
{routes.map((route, index) => (
<Match
key={index}
pattern={route.pattern}
component={route.component}
exactly={route.exactly}
/>
))}
</div>
</div>
</Router>
);
}
}
解决方案
The answer by user-013948 is the right approach, just the wrong react router version.
Essentially what you want to do is move any code that should only be rendered for certain matches into the component rendered by those matches.
Since the banner should only be rendered by some components, you should create a component just for it:
const Banner = () => (
<div className="ui grid banner">
<div className="computer tablet only row">
<div className="ui inverted fixed menu navbar page grid">
<Link to="/restaurant" className="brand item">Restaurant</Link>
<Link to='/addrestaurant' className="item tab">Add Restaurant</Link>
<Link to="/products" className="item tab">Products</Link>
</div>
</div>
</div>
)
And then, any components that should display the banner should include it:
const Content = () => (
<div>
<Banner />
{/* other content */}
</div>
)
Then, when you render your project, the banner will only be rendered if it is part of a <Match>'s component.
const App = () => (
<Router>
<div>
<Match pattern='/restaurant' component={Content} />
<Match pattern='/addrestaurant' component={AddRestaurant} />
</div>
</Router>
)
这篇关于路由到不同的页面[react-router v4]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
