我正在尝试使用React-Quill文本编辑器创建一个简单的博客。我想获取ReactQuill编辑器的值，并在不同的路径上预览它。我已经尝试实现这个目标很长一段时间了，每次我遇到同样的问题时，Quill编辑器都会在每次按键后失去焦点，并在控制台中抛出警告，说addRange（）：给定的范围不在文档中。

• 我观察到一件事。当我只是把 prop 传递给***< CreateBlog />* 而不应用路由时，它工作得很好。但是一旦我把路由应用到**< CreateBlog />*组件，以便我可以从编辑器中获取值并在不同的路由上预览它，我开始面对这个问题。 我认为React路由器可能是负责这种行为，但我无法找出确切的原因和它的修复。请帮助我。我已经附上我的代码下面供参考。

App.js:

class App extends Component {

  constructor(){
    super()

    this.state = {
      title: '',
      text: ''
    }

    this.handleBlogTextChange = this.handleBlogTextChange.bind(this)
    this.handleBlogTitleChange = this.handleBlogTitleChange.bind(this)
  }

  handleBlogTextChange(value){
    this.setState({
      text: value
    })
    console.log(this.state.text)
  }

  handleBlogTitleChange(value){
    this.setState({
      title: value
    })
    console.log(this.state.title)
  }

  render(){
    return (
      <BrowserRouter>
        <div class="App">
          <Switch>
            <Route path='/createBlog' component={() => <CreateBlog text={this.state.text} handleBlogChange={this.handleBlogTextChange} /> } />
            <Route exact path='/preview' component={() => <PreviewBlog title={this.state.title} text={this.state.text} />} />
            <Redirect to='/createBlog' />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

CreateBlog.js:

export default class CreateBlog extends Component {

    render() {
        return (
            <>
                   ----------
                        <TextEditor text={this.props.text} handleBlogChange={this.props.handleBlogChange} />
                   ----------
            </>
        )
    }
}

TextEditor.js:

class TextEditor extends Component {

    componentDidMount(){
        const input = document.querySelector('input[data-link]')
        input.dataset.link = 'https://google.co.in'
    }

    modules={
        toolbar: [
            [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
            [{size: []}],
            ['bold', 'italic', 'underline', 'blockquote','code-block'],
            [{'list': 'ordered'}, {'list': 'bullet'}, 
             {'indent': '-1'}, {'indent': '+1'},{'align': []}],
            ['link', 'image', 'video'],
            ['clean']
          ],
    }
    
    render() {
        return (
            <div className="editor">
                <ReactQuill theme="snow" placeholder="Enter story..." modules={this.modules} value={this.props.text} onChange={this.props.handleBlogChange} />
            </div>
        );
    }
}