单击后退按钮时，react-router意外执行

Question

i'm new to react,and this is just a part of my code.

About.js

import React from 'react'

export default React.createClass({
    render() {
        return <div > About < /div>
    },
    componentDidMount() {
        var elem = document.createElement("div");
        elem.innerText = "okokokkokoko";
        document.getElementById('app').appendChild(elem);
    }
})

App.js

import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><Link to="/about">About</Link></li>
          <li><Link to="/repos">Repos</Link></li>
        </ul>
      </div>
    )
  }
})

index.js

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, browserHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}/>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Router>
), document.getElementById('app'))

when i click the browser's back button on the About page,borwser will be back to the App page,but the page still retains the element

<div>okokokkokoko</div>

how can i solve this problem without changing the code of About.js?

Answer 1

You need to understand React first. You can't create elements like this since React is unable to track them. Instead using "componentDidMount" use regular render.

render() {
    return <div> okokokkokoko</div>;
}

I highly recommend to go back to React docs and understand it. https://facebook.github.io/react/tutorial/tutorial.html

Answer 2

This issue is occurring because of the code in componentDidMount code

componentDidMount() {
        var elem = document.createElement("div");
        elem.innerText = "okokokkokoko";
        document.getElementById('app').appendChild(elem);
    }

Here after you load /About page, you are appending a div to the body with text "okokokkokoko" . But after you got to /App page, you are not removing this from the page. Thats why it remains there.

Actually it is bad practice and this is not how react should be used.

Instead change your /About code's render to following

render() {
        return (
           <div>
             <div > About < /div>
             <div>okokokokokoko</div>
           </div>
        )
    }

Updated: In that case the following solution might help you

componentDidMount() {
        document.getElementById('abc').innerText = "okokokkokoko";
    }
render() {
        return (
           <div>
             <div > About < /div>
             <div id="abc"></div>
           </div>
        )
    }

Here you are creating a div in the current component. So when you will redirect to another route then the entire component (ie including your <div>okokok</div> ) will also unmount.