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>

交易是，当浏览地址栏时，所有路径均正确呈现。通过标题链接，只能在/和/tickets或/tickets/create之间导航，但是在/tickets和/tickets/create之间导航不会更新DOM。我曾尝试在const ReduxConnector = withRouter(connect(mapStateToProps, mapDispatchToProps)(App));上使用withRouter放置，但是还不太清楚它有什么用。

这种行为有哪些可能性？

React嵌套路由不会通过Link

0 个答案: