React 嵌套路由不会通过 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 具有逻辑和路由

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;

现在终于在 root.js

中加载了部分 header.js 组件

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

问题是，当通过地址栏导航时，所有路径都会正确呈现。通过 header Link 仅在 / 和 /tickets 或 /tickets/create 之间导航有效，但在 /tickets 和 /tickets/create 之间导航无效' 更新 DOM。我试过在 const ReduxConnector = withRouter(connect(mapStateToProps, mapDispatchToProps)(App)); 处使用 withRouter，但不太明白它有什么用。

这种行为的可能性有哪些？

Answer 1

从 Tickets 组件中删除 BrowserRouter 组件。你只需要它的一个实例在树中呈现在任何其他 React-Router 组件之上。在树中重复它会破坏事情。

React 嵌套路由不会通过 Link 更新

React nested routes doesn't update through Link

reactjs

redux

react-redux

react-router-v4