Question

我有两个组件，我有这个问题，ChampionLists和SelectedChamp。 SelectedChamp不依赖于ChampionLists数据我没有传递任何数据因为在SelectedChamp内部我根据参数获取新数据。

我的ChampionLists组件是我使用map渲染一些数据的地方，每个数据都包含在Link中，导航到champions / select /：param

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

目前在ChampionLists中我有另一个匹配url并接受参数的Route，这将呈现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

在为冠军定义路线时，你错过了“确切”。下面的代码对我有用。

{{1}}

组件无法在带有参数的新页面上呈现

1 个答案: