在 React Router 版本 ^5.1.2 中以编程方式更改路由的问题

Question

我无法使用 ReactRouter 版本 ^5.1.2 以编程方式更改路由。 我已经使用 react-router-dom 库中的 withRouter HOC 包装了组件，因此我可以访问历史记录 object 并使用 history.push function，在浏览器中链接已更改，但未访问组件并且浏览器正在使用'/' 路由中的组件。

这些是我的路线：

<Switch>
                    <Route 
                        path='/'
                        render={(props) => <Diagram {...props} onRef={diagramInstanceRef => this.diagramInstanceRef = diagramInstanceRef} />} 
                    />
                    <Route 
                        path='/diagramChild/:id'
                        render={(props) => <DiagramChild {...props} nodes={nodes} onRef={diagramChildInstanceRef => this.diagramChildInstanceRef = diagramChildInstanceRef} />}
                    />
                </Switch>

这就是我在 function 中更改它们的方式：

me.props.history.push(`/diagramChild/${searchPerformed}`);

在其他情况下：

me.props.history.push('/');

Answer 1

如果我是对的，您想要“/”以外的访问路径。

尝试在这样的路径之前包含“精确”：

<Route 
                    exact path='/'
                    render={(props) => <Diagram {...props} onRef={diagramInstanceRef => this.diagramInstanceRef = diagramInstanceRef} />} 
                />

路由器只会在完全匹配的情况下捕获该路径。