组件未使用参数在新页面上呈现

Question

我有两个组件遇到了这个问题，ChampionLists 和 SelectedChamp。 SelectedChamp 不依赖于 ChampionLists 数据，我没有向它传递任何数据，因为在 SelectedChamp 中，我正在根据参数获取新数据。

我的 ChampionLists 组件是我使用地图渲染一些数据的地方，每个数据都用 Link 包裹，导航到 champions/select/:param

<Link to={`${match.url}/select/${champ.name}`}> Some data infos </Link>

目前在 ChampionLists 中我有另一个匹配 url 并接受参数的路由，这会呈现 SelectedChamp 组件

<Route path={`${match.url}/select/:champName`} exact render={(props) => <SelectedChamp {...props}/>}/>

但是，如果我单击列出的任何数据，它不会加载到新页面，它只会呈现 ChampionLists 中的 SelectedChamp 组件，我如何才能让它加载到新页面？

我的index.js

ReactDOM.render(
<BrowserRouter>    
    <App />
</BrowserRouter>, document.getElementById('root'));

我的app.js

<Switch>
  <Route path="/" exact render={(props) => <FrontPage toggleGlobalHeader={this.hideGlobalHeader} {...props}/>}/>
  <Route path="/login" render={(props) => <Login user={user} {...props}/>}/>
  <Route path="/champions" render={(props) => <ChampionsList {...props}/>}/>
  <PrivateRoute path="/community" user={user} component={DashBoard}/>
  <Route path="*" render={(props) => <RouteNotFound toggleGlobalHeader={this.hideGlobalHeader} {...props}/>} />
</Switch>

我尝试在应用程序中添加路由，但它没有加载组件。

....
<Route path="/champions" render={(props) => <ChampionsList {...props}/>}/>
<Route path="/champions/select/:champName" render={(props) => <SelectedChamp {...props}/>}/>

Answer 1

您在为冠军定义路线时错过了"exact"。下面的代码对我有用。

<Route exact path="/champions" render={(props) => <ChampionsLists {...props} />} />
<Route path="/champions/select/:champName" render={(props) => <SelectedChamp {...props} />} />

组件未使用参数在新页面上呈现

Component not rendering on new page with param

reactjs

react-router

react-router-v4

react-router-dom