在条件 div 上反应路由

Question

考虑以下sn-p：

class App extends React.Component {
  constructor(props) {
        super(props);

        this.state = {
            
            showThird: false
        }

        this.showDivThree = this.showDivThree.bind(this)
    }

    showDivThree() {

        this.setState(prevState => ({ showSecond: false, showThird: !prevState.showThird}))
        console.log(this.state)
    }
  
  render() {
    return (
       <div className={'wrapper' + ( this.state.showThird ? ' show' : '')}>

                <div className="one">one
                    

                    {/* Show third */}
                    <div>
                        <button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button>
                    </div>
                </div>

                <div className="three">three
                    <div>
                        <button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button>
                        
                        <AnotherComponent />
                    </div>
                </div>

            </div>
    )
  }
}

class AnotherComponent extends React.Component {
  constructor(props) {
        super(props);

        this.state = {   
            
        }
       
    }

  
  render() {
    return (
       <div>
        <h4>Another component</h4>
       </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

.wrapper {
  overflow: hidden;
  white-space: nowrap;
}

.one, .two, .three {
  background: #333;
  border: 2px solid #787567;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-family: arial;
  overflow: hidden;
  padding: 20px;
  text-align: center;
  transition: border 0.2s, padding 0.2s, width 0.2s;
  min-height: 50vh;

}

.one {
  width: 100%;
}
.two {
  border-width: 2px 0;
  padding: 20px 0;
  width: 0;
}

.three {
  border-width: 2px 0;
  padding: 20px 0;
  width: 0;
}

.show .one, .show .two, .show .three {
  border-width: 2px;
  padding: 20px;
  width: 50%;
}

<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>
<div id="root"></div>

我想在这里实现路由。我正在使用 react-router 并认为全屏 div-one 位于索引路由“/”处。当我单击 showThird 时，它基本上会打开另一个 div 并在其中加载 AnotherComponent。我希望我的路线更改为“/另一个”。

我的目标是这样的 url '/another' 是可共享的，当有人点击该 url 时，他已经看到了在右半部分加载了 AnotherComponent 的确切的两个半页 div。

我怎样才能达到他的目的？

Answer 1

我认为将路线从/ 完全更改为/another 并不是一个好主意。由于您并没有真正更改页面，而只是在App 上打开一个面板，因此更改路线在语义上并不是真正正确的事情。

相反，如果您想让打开面板的行为可共享，您只需要设置一个将附加到 url 的查询参数，并且您只需要在挂载组件时检查它是否存在。

对于你所有的路由组件，react-router 提供了一个对象 location 到 props 中，它包含这样的查询参数，你可以在你的构造函数中使用来设置初始值。

点击打开面板，只需要调用react路由器的push方法添加你的查询字符串，关闭面板时调用删除即可。

class Route extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      showThird: props.location.query.open
    }

  }

  openPanel = () => {
    this.props.router.push('/?open')
  }

}