![](/img/trans.png)
[英]Is this the correct way to show data in React from a fetch request, if not how do I change JSX being rendered to a component?
[英]How do I only show a react component based on route change?
我是 React 新手,正在尝试构建一个简单的 React 应用程序。 我想根据当前路线显示一个组件。
索引.js
var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require("create-react-class");
import { Router, Route, browserHistory, Link } from "react-router";
var About = require("./about");
var Admin = require("./admin");
var App = createReactClass({
render: function() {
return(
<Router history={browserHistory}>
<Route path={"/"} component={RootComponent}></Route>
<Route path={"/about"} component={About}></Route>
<Route path={"/admin"} component={Admin}></Route>
</Router>
);
}
});
// Create a component
var RootComponent = createReactClass({
render: function() {
var currentLocation = this.props.location.pathname;
return(
<div>
<Link to={"/about"}>About</Link>
<Link to={"/admin"}>Admin</Link>
<h2>This is the root component</h2>
</div>
);
}
});
// put component into html page
ReactDOM.render(<App />, document.getElementById("app_root"));
是否可以放置一个if else
条件来在布局上呈现类似于下面的代码的内容?
var RootComponent = createReactClass({
render: function() {
var currentLocation = this.props.location.pathname;
if (currentLocation == "admin") {
return(
<div class="admin_template">
</div>
);
} else {
return(
<div class="home_template">
</div>
);
}
}
});
我想在单击链接时检测路线更改,然后相应地显示模板。
任何帮助是极大的赞赏。 谢谢
您可以在RootComponent
内部使用另一个<Router><Route /></Router>
开关,类似于您在App
组件中所做的,以根据路由呈现某些组件。
在 index.js 中你只需要添加你就可以添加另一个路由。 在这种情况下,我认为您想了解哪个是管理页面,哪个是用户页面,是的,可以放置 if else 条件来呈现某些内容,但这很糟糕 => 因为我们有 react-dom 但我们不使用那
所以我建议您使用多种解决方案中的一种来帮助您:
import { Route, Switch } from 'react-router-dom';
const wrappedRoutes = () => (
<div>
<Route path="/" component={abc} />
<Route path="/bcd" component={bcd} />
</div>
</div>
);
const Router = () => (
<Switch>
<Route path="/admin" component={wrappedRoutes} />
</Switch>
);
因此,如果您使用 url admin,您将获得组件 abc,如果您使用 url admin/bcd,您将获得组件 bcd。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.