Дубликат роутера при перезагрузке

Question

Сначала у меня есть этот фрагмент кода:

class navitem extends Component {
    state = {
        isShown: false
    }
    render() {
        return (
            <Router>
                <div>
                    <div href={'#' + this.props.dName} className="navItem">
                        <Link to={"/" + this.props.url}>{this.props.dName}</Link>
                    </div>

                    <Route path={"/textversion"} exact component={TextVersion} />
                </div>
            </Router >
        )
    }
}

В первый раз это работает очень хорошо, если я нажимаю на кнопку, на ней отображается мой компонент TextVersion.Проблема в том, что когда я перезагружаю страницу, компонент загружается в каждый navItem, почему это так?

Answer 1

Проблема здесь была, прежде всего, Router
. Необходимо добавить Router вокруг вашего приложения следующим образом:
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

Я добавил своймаршрут выше моей навигационной панели, где он должен быть таким:
<Route path="/textversion" component={TextVersion} />

В самом navItem я написал ссылку на Маршрут, который я определил ранее, так:
<Link to={"/" + this.props.url}>{this.props.dName}</Link>