javascript - React-Router 不会渲染组件
问题描述
我是 React 新手,正在尝试学习使用 React-Router v5。出于某种原因,我的组件不会通过路由器呈现。在我的 App.js 文件中,我从那里手动渲染了我的 Login.js,当我按下 Login.js 中的按钮时,路由器不会更改组件,但会更改 url。我已经看得很远了,我似乎找不到解决办法,我觉得这是我忽略的一些简单的事情。这是我的代码。
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App.js'
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
),
document.getElementById('root')
);
应用程序.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import routes from '../routes.js';
class App extends React.Component {
render() {
return (
<div className="HomeNavBar">
<routes />
</div>
);
}
}
export default App
路由.js
import React from 'react';
import { Switch, Route, Router, withRouter } from 'react-router-dom';
/**
* Import all page components here
*/
import App from './components/App';
import Login from './components/Login.js';
import Register from './components/Register.js';
/**
* All routes go here.
* Don't forget to import the components above after adding new route.
*/
export default function routes(props) {
return (
<Switch>
<Route path='/Login' component={withRouter(Login)}/>
<Route path='/Register' component={withRouter(Register)}/>
<Route exact path='/' component={withRouter(Login)}/>
</Switch>
);
}
登录.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import { Link, withRouter, Router } from 'react-router-dom'
class Login extends React.Component{
render() {
return (
<div>
<div class = "topnav">
<Link to="/">
<button class="HomeButton" id="b" href="#home">CollectR</button>
</Link>
<Link to="/Register">
<button id="a">SignUp</button>
</Link>
<Link to="/Login">
<button id="a" href="#Login">Login</button>
</Link>
</div>
<div id="logo">CollectR</div>
<div>
<form id="loginform">
<label id="loginregistertext">Email</label>
<input type="text" id="logintextbox" />
<label id="loginregistertext">Password</label>
<input type="Password" id="logintextbox" />
<button id="button">Login </button>
</form>
</div>
</div>
)
}
}
export default withRouter(Login)
解决方案
你需要这样(取自 react-router-dom 文档):
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
推荐阅读
- flutter - 如何使用 shared_preferences 库实现 Flutter Riverpod FutureProvider?
- python - 美丽的汤找到包含 div 和 span 的路径文本
- python-3.x - 即使文件中有字母,也要对文件进行数字排序
- java - 如何制作分享按钮
- html - 在动画期间翻转图像
- authentication - 在 mfp 身份验证中甚至会触发 handleChallenge()
- powershell - Powershell 读取文件并比较内容
- python - Setup.py 重新安装已经安装的用户编写的包
- php - 在包含 html(WordPress PHP 文件)的字符串中使用简码
- javascript - javascript 多重评分 svg 明星 点击