如何解决最琐碎的React Router用例无法正常工作-路由无法渲染
我正在用Typescript编写我的第一个React应用。
在学习完本教程之后,我创建了一个<Link>
,它引用了<Route>
组件中的所有<Router>
。当我在浏览器中单击“链接”时,URL会更改,但“路线”不会呈现。我无法弄清楚为什么不渲染路线。我读过很多SO问题,但它们都与Router的高级用法有关;我无法获得最基本的用例。
这是我的顶级组件:
import React,{Component} from 'react';
import {BrowserRouter as Router,Route,Link} from "react-router-dom";
import {StaticComponent} from "./StaticComponent/StaticComponent";
export default class App extends Component{
render() {
return (
<div className="App">
<Router>
<header className="App-header">
<span>header</span>
<Link to="/staticComponent">Static Component</Link>
</header>
<main>
<span>body</span>
<Route path="/staticComponent" element={StaticComponent}/>
</main>
</Router>
</div>
);
};
}
这是StaticComponent:
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
export function StaticComponent () {
return (
<h2>You are at Static Component</h2>
);
};
但是当我单击链接时,StaticComponent不会显示:
这里有一些小细节我弄错了吗?谢谢!
解决方法
我从来没有想过如何使用<Route>
元素上的“ element”属性,也没有想出@gbalduzzi提到的“ component”属性。但是,可以通过以下方式实现App.tsx:
import React,{Component} from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import {StaticComponent} from "./StaticComponent/StaticComponent";
export default class App extends Component<{},{}>{
render() {
return (
<div className="App">
<Router>
<header className="App-header">
<span>header</span>
<Link to="/staticComponent">Static Component</Link>
</header>
<main>
<span>body</span>
<Route path="/staticComponent">
<StaticComponent />
</Route>
</main>
</Router>
</div>
);
};
}
此外,StaticComponent.tsx的第2行似乎不是必需的;从那以后我就把它拿出来了。
最后,请确保您使用的是正确版本的React Router。适用于React Router 5的JSX文件似乎不适用于React Router 6。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。