Javascript 反应路由器：链接更新URL，但视图不变

我尝试了多种解决方案，但似乎都不起作用，因此代码如下：

预期行为：

• 单击“新建甲板”按钮

• 输入新组名称并按Enter键，将添加新组

• 单击new Deck，重定向到url中的/Deck/：deckId，其中deckId是组的id

• VisibleCards组件激发并返回包含当前deckId的div

实际行为：

• 单击“新建甲板”按钮

• 输入新组名称并按Enter键，将添加新组

• 单击new Deck，重定向到url中的/Deck/：deckId，其中 deckId是甲板的id

• VisibleCards不会启动，如果我手动刷新页面，它会启动

*另外请注意，如果我手动输入url，VisibleCards组件将启动*

app.js：

//STORE
const store = createStore(combineReducers(reducers));
const history = syncHistoryWithStore(createBrowserHistory(), store);

function run(){
    let state = store.getState();
    console.log(state);
    ReactDOM.render(
        <Provider store={store}>
            <Router history={history}>
                <div className="holder">


                    <div className="sidebar">
                        <Route path='/' component={App}/>
                    </div>
                    <div className="VisibleCards">
                        <Route path='/deck/:deckId' component={VisibleCards}/>
                    </div>
                </div>


            </Router>       
        </Provider>,document.getElementById('root'));
}
run();
store.subscribe(run)

window.show = ()=>{store.dispatch(showAddDeck())};
window.hide = ()=>{store.dispatch(hideAddDeck())};
window.add = ()=>{store.dispatch(addDeck(new Date().toString()))};

//存储
const store=createStore（组合减速机（减速机））；
const history=syncHistoryWithStore（createBrowserHistory（），store）；
函数运行（）{
let state=store.getState（）；
console.log（状态）；
ReactDOM.render(
，document.getElementById（'root'）；
}
run（）；
store.subscribe（运行）
window.show=（）=>{store.dispatch（showAddDeck（））}；
window.hide=（）=>{store.dispatch（hideaddeck（））}；
window.add=（）=>{store.dispatch（addDeck（newdate（）.toString（）））}；

VisibleCards.js：

function mapStateToProps(state, ownProps) {
  //console.log(ownProps.location.pathname);
  console.log(`currently is visible cards.js , ownprops is: `);
  console.log(ownProps)
  return {state};
}

class Cards extends Component{
    constructor(props){
        super(props)
        //console.log("Currently in VisibleCards, props are:")
        //console.log(props)
    }
    render(){
        return (
            <div>{this.props.match.params.deckId}</div>
        )
    }
}
export default withRouter(connect(mapStateToProps)(Cards));

函数mapStateToProps（状态，ownProps）{
//log（ownProps.location.pathname）；
log（`current是visible cards.js，ownprops是：`）；
console.log（ownProps）
返回{state}；
}
类卡扩展组件{
建造师（道具）{
超级（道具）
//log（“当前在VisibleCards中，道具为：”）
//控制台日志（道具）
}
render（）{
返回(
{this.props.match.params.deckId}
)
}
}
使用路由器导出默认值（连接（MapStateTops）（卡））；

App.js

function mapStateToProps(state, ownProps) {
  //console.log(ownProps.location.pathname);
  console.log(`currently is App.js , state is: `);
  console.log(state);
  console.log(`currently is App.js , ownProps is: `)

  //var deckId = (ownProps.location.pathname).substring(6);
  console.log(ownProps)
  //console.log(state);
  return {state};
}

class App extends Component{
    constructor(props){
        super(props);
    }
    componentWillReceiveProps(nextProps) {
      if (nextProps.location !== this.props.location) {
        // navigated!
        console.log("here");
      }
      else{
        console.log("In app.js else statment,this.props are:")
        console.log(this.props);
        //console.log("nextprops are:")
        //console.log(nextprops);
      }
    }
    render(){
        return (
            <div className="app">
                <h1>{this.props.deckId}</h1>
                <Sidebar/>
                {this.props.children}
            </div>
        )
    }
}

export default withRouter(connect(mapStateToProps)(App));

函数mapStateToProps（状态，ownProps）{
//log（ownProps.location.pathname）；
log（`当前为App.js，状态为：`）；
console.log（状态）；
log（`current是App.js，ownProps是：`）
//var deckId=（ownProps.location.pathname）.substring（6）；
console.log（ownProps）
//console.log（状态）；
返回{state}；
}
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
组件将接收道具（下一步）{
if（nextrops.location！==此.props.location）{
//导航！
console.log（“此处”）；
}
否则{
log（“在app.js else station中，this.props是：”）
console.log（this.props）；
//log（“下一步是：”）
//console.log（nextrops）；
}
}
render（）{
返回(
{this.props.deckId}
{this.props.children}
)
}
}
使用路由器导出默认值（connect（mapstatetops）（App））；

Sidebar.js

class Sidebar extends Component{

    constructor(props){
        super(props)
        this.createDeck = this.createDeck.bind(this);
    }

    componentDidUpdate(){
        var el = ReactDOM.findDOMNode(this.refs.add)
        if(el){el.focus();}
    }
    createDeck(e){
        if(e.which!==13)return
        //console.log("here");
        console.log(this);
        var name = ReactDOM.findDOMNode(this.refs.add).value;
        //console.log("here");
        this.props.addDeck(name);
        this.props.hideAddDeck();
    }


    render(){
        let props = this.props
        //console.log(props)
        return (
            <div className="sidebar">
                <h2>All decks</h2>
                <button onClick = {e=>this.props.showAddDeck()  }>
                    New Deck
                </button>
                <ul>
                    {props.decks.map((deck,i)=>
                        <li key={i}>
                            <Link  to={`/deck/${deck.id}`} >{deck.name}</Link>
                        </li>
                    )}
                </ul>

                {props.addingDeck && <input ref='add' onKeyPress = {this.createDeck}></input>}
            </div>)
    }
}
const mapStateToProps = ({decks,addingDeck})=>({
    decks,
    addingDeck
});

const mapDispatchToProps = (dispatch)=>({
    addDeck : name => dispatch(addDeck(name)),
    showAddDeck : () => dispatch(showAddDeck()),
    hideAddDeck : () => dispatch(hideAddDeck())
})



export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Sidebar));

类边栏扩展组件{
建造师（道具）{
超级（道具）
this.createDeck=this.createDeck.bind（this）；
}
componentDidUpdate（）{
var el=ReactDOM.findDOMNode（this.refs.add）
如果（el）{el.focus（）；}
}
createDeck（e）{
如果（e.which！==13）返回
//console.log（“此处”）；
console.log（this）；
var name=ReactDOM.findDOMNode（this.refs.add）.value；
//console.log（“此处”）；
this.props.addDeck（名称）；
this.props.hideAddeck（）；
}
render（）{
让props=this.props
//控制台日志（道具）
返回(
所有甲板
this.props.showAddDeck（）}>
新甲板

{props.decks.map（（deck，i）=>

{deck.name}

)}

{props.addingDeck&&}
)
}
}
常量mapStateToProps=（{deck，addingDeck}）=>({
甲板，
附加甲板
});
const mapDispatchToProps=（调度）=>({
addDeck:name=>dispatch（addDeck（name）），
showAddDeck:（）=>分派（showAddDeck（）），
HIDEADDECK:（）=>调度（HIDEADDECK（））
})
使用路由器导出默认值（connect（mapStateToProps，mapDispatchToProps）（侧栏））；

我猜该组件正在触发componentWillUpdate（），如果您从同一路线执行操作，该组件可能正在接收新的道具

那么我该怎么办？在更新时读取新道具中的id，并使用新值设置状态以重新呈现该组件。首先验证新道具是否包含新id您是否在道具中获得新id？是否调用componentWillUpdate？componentWillUpdate仅在刷新时在可视卡中调用，当我单击我的某个deck时，它不会按预期调用它它是否发生在同一路线或不同的路线（/deck/:deckId\u 1->/deckId/：deckId\u 2）或（/some\u路线->/deck/:deckId）？