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

【问题标题】：React nested routes doesn't update through LinkReact 嵌套路由不会通过 Link 更新
【发布时间】：2019-03-11 20:50:12
【问题描述】：

值得一提的是，我使用的是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;

现在终于，root.js 中加载的部分 header.js 组件

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

交易是，当浏览地址栏时，所有路径都会正确呈现。通过标题链接仅在/ 和/tickets 或/tickets/create 之间导航有效，但在/tickets 和/tickets/create 之间导航不会更新DOM。我曾尝试在const ReduxConnector = withRouter(connect(mapStateToProps, mapDispatchToProps)(App)); 使用 withRouter，但无法确定它有什么用处。

这种行为的可能性是什么？

【问题讨论】：

标签： reactjs redux react-redux react-router-v4

【解决方案1】：

从您的Tickets 组件中删除BrowserRouter 组件。您只需要在树中呈现它的单个实例，即可使用其他 React-Router 组件。在树的较低位置重复它会破坏事情。

【讨论】：