Question

我是新来的反应者，正在尝试构建一个简单的反应应用程序。我想显示一个基于当前路线的组件。

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>
    );

        }
    }
});

我想在单击链接时检测到路线更改，然后相应地显示模板。

任何帮助将不胜感激。谢谢

Answer 1

您可以在<Router><Route /></Router>内部使用另一个RootComponent开关，类似于在App组件中完成操作以根据路线渲染某些组件。

Answer 2

在index.js中，您只需添加即可添加其他路由。在这种情况下，我认为您想对哪个页面是admin页面和哪个user页面进行detech，是的，可以放置if条件来渲染某些东西，但这很不好 =>因为我们有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。

如何仅显示基于路线更改的反应组件？

2 个答案: