Реагировать на вложенные маршруты не обновляется через Link

Question

Стоит отметить, что я использую redux и ApolloProvider. Ниже приведены пути:

• / индекс
• /tickets просмотров билетов
• /tickets создает новые заявки

index.js точка входа

const store = createStore(/* Redux reducer */);

class App extends Component {
    constructor(props) {
        super(props);
        // emitted states...
        // define apollo client this.state = {client: new ApolloClient...}
    }

   // emitted functions...

    render() {
        return (
            <ApolloProvider client={this.state.client}>
                <Root {...(this.props)} {...(this.state)}/>
            </ApolloProvider>
        )
    }
}

const ReduxConnector = connect(mapStateToProps, mapDispatchToProps)(App);
ReactDOM.render(<Provider store={store}><ReduxConnector/></Provider>, document.getElementById("react-loader"));

root.js Основной класс с логикой и маршрутизацией

class Root extends Component {
    constructor(props) {
        super(props);
    }
    // emitted functions...
    render() {
        if (this.props.authorized) {
            return (
                <BrowserRouter>
                    <Fragment>
                        <Header/>
                        <Switch>
                            <Route exact path='/' component={Home}/>
                            <Route path='/tickets' component={Tickets}/>
                        </Switch>
                    </Fragment>
                </BrowserRouter>
            )
        } else {
            return <Login/>;
        }
    }
}
export default Root;

tickets.js Обеспечивает маршрутизацию билетов

class Tickets extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<BrowserRouter>
            <Switch>
                <Route path={`${this.props.match.path}/create`} component={Create}/>
                <Route exact path={`${this.props.match.path}`} component={View}/>
            </Switch>
        </BrowserRouter>);
    }
}

export default Tickets;

Теперь, наконец, частичный компонент header.js, загруженный в root.js

<Link to={"/"}>Homepage</Link>
<Link to={"/tickets"}>View tickets</Link>
<Link to={"/tickets/create"}>Create a ticket</Link>

Дело в том, что при навигации по адресной строке все пути отображаются правильно. Через заголовок Link работает только навигация между / и /tickets или /tickets/create, но навигация между /tickets и /tickets/create не обновляет DOM. Я пытался разместить с помощью withRouter на const ReduxConnector = withRouter(connect(mapStateToProps, mapDispatchToProps)(App));, но не мог понять, что он будет полезен.

Каковы возможности для такого поведения?

Answer 1

Удалите компонент BrowserRouter из компонента Tickets. Вам требуется только один его экземпляр для отображения в дереве выше любого использования других компонентов React-Router. Повторение этого ниже в дереве сломает вещи.