我是 React 新手,正在尝试构建一个简单的 React 应用程序。我想显示一个基于当前路由的组件。
index.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>
);
}
}
});
我想在单击链接时检测路由更改,然后相应地显示模板。
非常感谢任何帮助。谢谢
最佳答案
您可以使用另一个 <Router><Route /></Router>
在你的内部切换 RootComponent
与您在 App
中所做的类似component 根据路由渲染某些组件。
关于javascript - 如何仅显示基于路由更改的 react 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56791428/