Question

我正在使用以下流程处理应用程序（使用React和react-router） 1.用户进入主页并在城市名称中键入serachbar，然后单击按钮。（此时，URL应为localhost：8080 / 2.单击该按钮，将安装一个邻域组件，为您提供您键入的特定城市中的邻居列表。（此时，URL应为localhost：8080 / city / neighborhoods。 3.现在我们看到一个邻居列表，你可以点击一个邻居并获得它的详细信息，如人口和大小等（此时，URL应该是localhost：8080 / city / neighborhood / detail。< / p>

现在，我正在使用react-router作为路由。这是代码：

`ReactDOM.render(
<Provider store={store}>
  <Router history={history}>
    <Route path="/" component={App}>
        <Route path="city" component={City}>
          <Route path="/neighborhood" component={Neighborhood} />
        </Route>
    </Route>
  </Router>
</Provider`

由于被调用的主要组件是App，我还给了App.js {this.props.children}。

在我的本地计算机上，没有任何点击正在更改URL，但如果我键入localhost：8080 / city / neighborhood / detail，则没有任何反应，它只是保持不变。没错。

当用户点击呈现不同组件的不同按钮时，如何让URL自动更改？

Answer 1

您未到达该网址，因为您尚未在路线中定义该网址，请将路线更改为：

ReactDOM.render(
 <Provider store={store}>
   <Router history={history}>
     <Route path="/" component={App}>
         <Route path="city" component={City}>
           <Route path="neighborhood" component={Neighborhood}>
            <Route path="detail" component={detail}>
           </Route>
         </Route>
     </Route>
  </Router>
 </Provider>
)

如果你没有使用“细节”组件，它就像一个模态，只需使用javascript打开模态。如果您正在使用Neighborhood组件获取详细信息，并且您只是更改URL并更新组件，请按照以下说明操作：你的路线应该是这样的：

ReactDOM.render(
 <Provider store={store}>
   <Router history={history}>
     <Route path="/" component={App}>
         <Route path="city" component={City}>
           <Route path="neighborhood" component={Neighborhood}>
             <Route path="(:variable)" component={Neighborhood}>//variable is a parameter, which will be used in the component to get the last part of URL it helps you to create pages other than "detail" with no need to more child routes
           </Route>
         </Route>
     </Route>
  </Router>
 </Provider>
)

邻域组件中的

：

componentDidUpdate(){
  var {variable} = this.params
  if(variable === "detail"){
    //do something. probably change a state to change a part of your view in order to show city detail.
  }
}

我希望它可以帮到你。

使用react-router时如何获取要更新的SPA的URL？

1 个答案: