在React路由器v6中创建页面之间的链接
在React路由器v6中创建页面之间的链接
提问于 2021-12-15 10:39:47
App.js
class App extends Component {
render() {
return (
<Router>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="signin" element={<Signin />} />
</Routes>
</div>
</Router>
);
}
}Signin.js
class Card extends Component {
render() {
return (
<Link to="signin">Signin</Link>
)
}
}如何在未出现主页的情况下移动到react路由器第6版中的标志，谢谢您的帮助
回答 2
Stack Overflow用户
发布于 2021-12-15 10:55:34
首先，我建议您将signin端点从signin更改为/signin。其次，代码中还有一个额外的关闭</div>。
您可以在这里这样使用Redirect
class App extends Component {
render() {
return (
<Router>
<Header />
<Routes>
<Route path="/" element={} >
<Redirect to="/signin" />
</Route>
<Route path="/home" element={< Home />} />
<Route path="/signin" element={<Signin />} />
</Routes>
</Router>
);
}
}有关更多信息，请参阅这里
Stack Overflow用户
发布于 2021-12-19 12:28:55
当使用componentWillMount时，在呈现之前执行并被使用，根组件可以用于此组件中的路由，如下所示
class App extends Component {
componentWillMount() {
/**
codes that fetch from api
**/
}
render() {
return (
<Router>
<Header />
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>
);
}
}在已链接到签名的组件卡中，必须如下所示
class Card extends Component {
render() {
return (
<button>
{hasProducts ? <nav><Link to="signin">Checkout</Link></nav> : 'Checkout'}
</button>
)
}
}在基于类的组件中，当决定使用库react-router时，不能使用useParams来访问当前url的路径，而不能使用window.location.pathname，也可以使用react-router v6上的路由和访问当前url路径的条件三元操作符，如下所示
class WrappedComponent extends Component {
render() {
const pathname = window.location.pathname === current pathname;
return (
<>
{ pathname ?
<Routes>
<Route path="signin" element={<Signin />} />
</Routes>
:
<div>
/**
codes that return data of api and firstly rendered
**/
</div>
}
</>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70362247
复制相关文章
相似问题
腾讯云开发者
