Question

我正在尝试根据有条件呈现的组件设置url（几乎完全遵循fb tutorial）。我跳过了一些细节，但基本上代码如下：

class ParentComponent extends React.Component {

  render() {
   const isTrue = this.state.isTrue;

   let component= null;
   if (isTrue) {
       component = <Component1/>;
   } else {
       component= <Component2/>;
   }

   return (
     <div>
       {component}
       <Component3/>
          ...
       <ComponentN/>
     </div>
    );
  }
}

现在，我希望url是/ component1或/ component2，具体取决于加载的组件。我尝试过添加browserHistory.push（＆＃39; / component1＆＃39;），但它并没有工作。我也试过this，但没有成功。

我是前瞻性开发的新手，所以如果我错了，请纠正我。在我看来，只是推动历史记录无法解决问题，因为我实际上希望页面始终保持“父组件”。但是当加载其中一个组件（1或2）时，应该更新url。希望这是有道理的。

版本：

npm -v react-router
5.2.0

谢谢！

Answer 1

请尝试以下代码。它应该按预期工作。我在代码中使用了链接导航。您可以state使用Conditional Rendering。如果有任何帮助，请告诉我。

更新：创建小提琴以获得更清晰的解决方案 - https://jsfiddle.net/fo6zupgj/8/

class ComponentOne extends React.Component {
  render() {
    return (
      <div>
        <h2>Component 1</h2>
        <button onClick={() => this.props.history.goBack()}>Go Back</button>
      </div>
    )
  }
}

ComponentOne = ReactRouterDOM.withRouter(ComponentOne);

class ComponentTwo extends React.Component {
  render() {
    return (
      <div>
        <h2>Component 2</h2>
        <button onClick={() => this.props.history.goBack()}>Go Back</button>
      </div>
    )
  }
}

ComponentTwo = ReactRouterDOM.withRouter(ComponentTwo);

class Home extends React.Component {
  handleNavComponent(ev, index) {
    ev.preventDefault();
    const { history } = this.props;
  
    history.push(`/component${index}`);
  }
  
  render() {
    return (
      <ul>
        <li><a href="#" onClick={(ev) => this.handleNavComponent(ev, 1)}>Component 1</a></li>
        <li><a href="#" onClick={(ev) => this.handleNavComponent(ev, 2)}>Component 2</a></li>
      </ul>
    )
  }
}

Home = ReactRouterDOM.withRouter(Home);

const DynamicRoutes = (props => {
  const { Route } = ReactRouterDOM;
  
  return (
    <Route path={props.path} component={props.component} />
  );
});

const components = [
  { path: "/component1", name: ComponentOne },
  { path: "/component2", name: ComponentTwo }
];

class App extends React.Component {
  render() {
    const { BrowserRouter, HashRouter, Switch, Route } = ReactRouterDOM;
  
    return (
      <HashRouter>
        <Switch>
          { components.map(c => <DynamicRoutes path={c.path} component={c.name} />) }
          <Route path="/" component={Home} />
        </Switch>
      </HashRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

<div id="root"></div>

有关react-router的更多信息，请参阅此docs。

使用条件渲染实现路由

1 个答案: