React-Router：链接更新URL，但视图不变

Question

I've tried multiple solutions but none seem to work so here's the code:

Expected Behavior:

• Click on new Deck button

• Enter new Deck name and press enter, new deck is added

• Click on new Deck,get redirected to /deck/:deckId in the url, Where deckId is the id of the deck

• VisibleCards component fires and returns a div containing current deckId

Actual Behavior:

• Click on new Deck button

• Enter new Deck name and press enter, new deck is added

• Click on new Deck,get redirected to /deck/:deckId in the url, Where deckId is the id of the deck

• VisibleCards does not fire, it fires if i refresh the page manually

*Also please note that if i enter the url manually, the VisibleCards component fires *

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

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

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

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

Answer 1

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