[英]React-Router will not render components
I am new to React and am trying to learn to use React-Router v5.我是 React 的新手,正在尝试学习使用 React-Router v5。 For some reason, my components will not render through the router.
出于某种原因,我的组件不会通过路由器呈现。 Once in my App.js file, I manually rendered my Login.js from there and when I would press buttons within Login.js, router would not change components but it would change the url.
在我的 App.js 文件中,我从那里手动呈现我的 Login.js,当我按下 Login.js 中的按钮时,路由器不会更改组件,但会更改 url。 I have looked far and wide and I can't seem to find a fix, I feel like it is something simple I overlooked.
我看了很多遍,似乎找不到解决方法,我觉得这是我忽略的简单事情。 Here is my code.
这是我的代码。
Index.js索引.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')
);
App.js应用程序.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
Routes.js路由.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>
);
}
Login.js登录.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)
You need like this (taken from react-router-dom documentation):你需要这样(取自 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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.