反应路由器 URL 更改但不是组件 [英] React Router URL Change but Not Component
本文介绍了反应路由器 URL 更改但不是组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
React Router 改变了 URL 但组件没有被渲染我已经在寻找答案,但这些例子都没有奏效当前 React Router &React Router DOM 版本是 5.0.0它仍然是普通的 create-react-app
我尝试使用 Switch
标签
import React, { Component } from 'react';从'./logo.svg'导入标志;导入'./App.css';import { BrowserRouter as Router, Route, Link } from 'react-router-dom';const 索引 = () =>{返回<h2>家</h2>;};const 关于 = () =>{返回<h2>关于</h2>;};const 用户 = () =>{返回<h2>用户</h2>;};类 App 扩展组件 {使成为() {返回 (<路由器><div className="应用程序"><header className="App-header"><li><链接到="/"><h1>首页</h1></链接><li><链接到="/关于"><h1>关于</h1></链接><li><链接到="/用户"><h1>用户</h1></链接></标题><小时/><路由精确路径="/" Component={Index}/><Route path="/about" Component={About}/><Route path="/users" Component={Users}/>
</路由器>);}}导出默认应用程序;
它不会渲染组件
解决方案
尝试使用小写 c 设置 'component' 属性
React Router change the URL but the component is not rendered I have already looked for answer but none of those example is worked Current React Router & React Router DOM version is 5.0.0 It's still plain create-react-app
I've tried to use Switch
tag
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Index = () => {
return <h2>Home</h2>;
};
const About = () => {
return <h2>About</h2>;
};
const Users = () => {
return <h2>Users</h2>;
};
class App extends Component {
render() {
return (
<Router>
<div className="App">
<header className="App-header">
<li>
<Link to="/">
<h1>Home</h1>
</Link>
</li>
<li>
<Link to="/about">
<h1>About</h1>
</Link>
</li>
<li>
<Link to="/users">
<h1>Users</h1>
</Link>
</li>
</header>
<hr />
<Route exact path="/" Component={Index} />
<Route path="/about" Component={About} />
<Route path="/users" Component={Users} />
</div>
</Router>
);
}
}
export default App;
It wont render the component
解决方案
Try setting the 'component' attribute with lowercase c
这篇关于反应路由器 URL 更改但不是组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文