在React中的表单提交中使用条件渲染设置适当的URL

Question

我正在尝试确定处理此路由情况的最佳方法。在下面的代码中，我有一个组件，如果使用this.state.loading满足条件，则该组件将在表单提交时呈现孩子。看起来像这样：

import React, { Component } from 'react';
import './styles/Analytics.css';
import { connect } from 'react-redux';
import { getRecord } from '../actions/recordActions.js';
import WordToSentenceMatch from '../components/Analytics/WordToSentenceMatch'


class Analytics extends Component {
    state = {
        query: '',
        loading: true
    }


    handleChange = e => {
        this.setState({ query: e.target.value})
    }

    componentDidMount = (props) => {
            this.props.getRecord()
        }

    handleSubmit = e => {
        e.preventDefault()
        if (this.state.query !== '') {
            this.setState({loading: false})
        } else{
            alert("Please enter something!")
        }
    }

    render(){
    if (this.state.loading !== true) {
        return <WordToSentenceMatch {...this.state}{...this.props}/>
    }
        return(
        <div id="form-container">
         <svg preserveAspectRatio="none" viewBox="0 0 100 102" height="200" width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" className="svgcolor-light">
            <path d="M0 0 L50 100 L100 0 Z" fill="#546a7b" stroke="#393d3f"></path>
        </svg>
            <h2>Enter a word below to see what sentence it belongs to.</h2>
            <div id="form">
                <form onSubmit={this.handleSubmit}>
                    <p>
                    <h2 id="form-label">Enter Word:</h2>
                    <input
                        type="text"
                        id="query"
                        query="query"
                        value={this.state.query}
                        onChange={this.handleChange}
                    />
                    </p>
                    <button type="submit" value="Submit">Search Text</button>
                </form>
            </div>
          </div>
        )
    }
}

const mapStateToProps = (state) => {
  return ({
    records: state.allRecords.records
  });
};

这可以根据需要工作，但是问题是，当我渲染<WordToSentenceMatch />时，路径仍然是父路径的镜像。我想实现后退按钮以返回到容器（<Analytics />）。此问题同样适用于<WordToSentenceMatch />中的嵌套渲染，该渲染会渲染错误组件。该错误组件仍然具有与<Analytics />容器http://localhost:3000/analytics相同的路径。这是代码：

import React, { Component } from 'react';
import '../styles/WordToSentenceMatch.css';
import {RichUtils} from 'draft-js';
import ErrorMessage from '../Analytics/ErrorMessage'


class WordToSentenceMatch extends Component {
    state = {
        sentence: ''
    }

    componentWillMount(){
        if (this.props.records.length >= 1) {
            const query = this.props.query
            const content = JSON.parse(this.props.records[this.props.records.length - 1].body.replace(/=>/g, ":")).blocks[0].text
            const matchingSentence = content.split(/[.?!]/).filter(function(n) {
                const regex = new RegExp(query, 'i')
                console.log(regex)
                return regex.test(n)
            });
            this.setState({sentence: matchingSentence})
        }
    }

    render(){
    if (this.state.sentence.length === 0) {
        return <ErrorMessage />
    }
    return(
            <div id="sentence-container">
                    <table>
                            <tr>
                                {this.state.sentence.map(function(sentence){return <td>{sentence}</td>})}
                            </tr>
                    </table>
            </div>
            )
    }
}

export default WordToSentenceMatch;

目前，我的路线如下：

class App extends Component {
  render() {
    return (
     <Router>
        <div className="app">
        <NavBar />
            <div>
                <Route exact path='/' component={Home} />
                <Route path='/analytics' component={Analytics} />
                <Route path='/editor' component={TextEditor} />
                <Route path='/error' component={ErrorMessage} />
            </div>
        </div>
      </Router> 
    );
  }
}

export default App;

我只想确保我走了正确的路，如果是，那么下一步要做什么呢？