如何仅根据路由更改显示反应组件？答案

【问题标题】：How do I only show a react component based on route change?如何仅根据路由更改显示反应组件？
【发布时间】：2020-05-11 18:46:34
【问题描述】：

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

        }
    }
});

我想在点击链接时检测路线变化，然后相应地显示模板。

非常感谢任何帮助。谢谢

【问题讨论】：

render() 函数和其他函数一样；只要它返回有效的 JSX / 组件，你就可以在里面做任何你想做的事情（只是不要改变状态；））还要检查这个：stackoverflow.com/questions/46842117/…
你应该使用Switch

标签： javascript html css node.js reactjs

【解决方案1】：

您可以在RootComponent 中使用另一个<Router><Route /></Router> 开关，类似地让您在App 组件中完成基于路由渲染某些组件的操作。

【讨论】：

【解决方案2】：

在 index.js 中你只需要添加就可以添加另一个路由。在这种情况下，我认为您想要 detech 哪个是管理页面，哪个是用户页面，是的，可以设置 if else 条件来呈现某些内容，但这很糟糕 => 因为我们有 react-dom 但我们不使用它

所以我建议你有许多解决方案中的 1 个可能会帮助你：

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。

【讨论】：