我一直在玩 React 路由器并尝试不同的东西,但我遇到了这个问题。
当用户路由到简单的 localhost:3000
时,预期的路由发生并且我看到了 ParamsComponent
但是当用户导航到 localhost:3000/netflix
其中有一个链接,我没有看到要在屏幕上呈现的子组件。
这是我的路由器配置:
<Router>
<Switch>
<Route exact path="/" component={ParamsComponent} />
<Route path="/:id" component={Child} />
</Switch>
</Router>
这是我的 ParamsComponent
组件:
class ParamsComponent extends React.Component {
render() {
return (
<div>
<Router>
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to="/netflix">Netflix</Link>
</li>
<li>
<Link to="/zillow-group">Zillow Group</Link>
</li>
<li>
<Link to="/yahoo">Yahoo</Link>
</li>
<li>
<Link to="/modus-create">Modus Create</Link>
</li>
</ul>
</div>
</Router>
</div>
);
}
}
export default ParamsComponent;
这是我的 Child
组件:
class Child extends React.Component {
render() {
const { match } = this.props;
console.log("child", this.props);
return (
<div>
<h3>ID: {match.params.id}</h3>
</div>
);
}
}
export default Child;
最佳答案
你应该只有一个顶级 Router
这样每个 Link
组件通过上下文获得相同的 history
对象作为你的 Route
组件。
从 ParamsComponent
中删除 Router
,它就会工作。
class ParamsComponent extends React.Component {
render() {
return (
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to="/netflix">Netflix</Link>
</li>
<li>
<Link to="/zillow-group">Zillow Group</Link>
</li>
<li>
<Link to="/yahoo">Yahoo</Link>
</li>
<li>
<Link to="/modus-create">Modus Create</Link>
</li>
</ul>
</div>
);
}
}
关于javascript - 当用户导航到 react 路由器中的特定路线时,不会呈现任何 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55199393/