[英]React router dom: Route and Router not working at all
I am fairly new to react and trying to make a redirect using react-router-dom I did everything as the documentation but my code doesn't seem to work.我对做出反应并尝试使用 react-router-dom 进行重定向相当陌生,我将所有内容都作为文档进行,但我的代码似乎不起作用。 I get an error regarding no element found which I don't understand what is causing it.我收到关于未找到元素的错误,我不明白是什么原因造成的。 Also, I am just trying to reach the page using the address bar and not any button or link for now.另外,我现在只是尝试使用地址栏而不是任何按钮或链接来访问该页面。
Error错误
Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.
Same error for /register /register 的相同错误
index.js index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import Register from "./components/Register";
ReactDOM.render(
<Router>
<React.StrictMode>
<Routes>
<Route exact path="/register" component={Register} />
<Route exact path="/" component={App} />
</Routes>
<App />
</React.StrictMode>
</Router>,
document.getElementById('root')
);
reportWebVitals();
App.js应用程序.js
import { Component } from 'react';
class App extends Component {
render(){
return (
<div>
HELLO WORLD
</div>
);
}
}
export default App;
Register.js注册.js
import { useState } from "react";
import { useNavigate } from "react-router-dom";
export default function Register(){
const history = useNavigate();
const initialFormData = Object.freeze({
email: '',
password: '',
});
const [formData, updateFormData] = useState(initialFormData);
const handleChange = (event) => {
updateFormData({
...formData,
// Trimming any whitespace
[event.target.name]: event.target.value.trim(),
});
}
const handleSubmit = (event) => {
event.preventDefault();
console.log(event.target.email.value);
console.log(event.target.password.value);
}
return (
<form onSubmit={handleSubmit}>
<div>
<label>
Email:
<input type="text" value={formData.email} name="email" onChange={handleChange} />
</label>
</div>
<div>
<label>
Password:
<input type="text" value={formData.password} name="password" onChange={handleChange}/>
</label>
</div>
<input type="submit" value="Submit" />
</form>
);
}
You are not rendering the route components correctly.您没有正确渲染路由组件。 They should be rendered as JSX, not a reference to the component, on the element
prop.它们应该在element
prop 上呈现为 JSX,而不是对组件的引用。 This is a breaking change between versions 5 and 6 of react-router-dom
.这是react-router-dom
版本 5 和 6 之间的重大变化。 Note also that Route
components also no longer take an exact
prop, they are now always exactly matched.还要注意Route
组件也不再采用exact
prop,它们现在总是完全匹配。
ReactDOM.render(
<Router>
<React.StrictMode>
<Routes>
<Route path="/register" element={<Register />} />
<Route path="/" element={<App />} />
</Routes>
<App />
</React.StrictMode>
</Router>,
document.getElementById('root')
);
can you slightly modify your index.js
and try once again:你能稍微修改一下你的index.js
并再试一次吗:
react-router-dom@5 react-router-dom@5
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
Switch,
Route,
BrowserRouter as Router,
} from "react-router-dom";
import Register from "./components/Register";
ReactDOM.render(
<Router>
<React.StrictMode>
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/" component={App} />
</Switch>
<App />
</React.StrictMode>
</Router>,
document.getElementById('root')
);
reportWebVitals();
react-router-dom@6 react-router-dom@6
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
Route,
Routes,
BrowserRouter as Router,
} from "react-router-dom";
import Register from "./components/Register";
ReactDOM.render(
<Router>
<React.StrictMode>
<Routes>
<Route path="/register" element={<Register />} />
<Route path="/" element={<App />} />
</Routes>
<App />
</React.StrictMode>
</Router>,
document.getElementById('root')
);
reportWebVitals();
This should work.这应该有效。
import React from "react";
import LoginForm from "./authentication/LoginForm";
import RegisterForm from "./authentication/RegisterForm";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Router>
<React.StrictMode>
<Routes>
<Route path="/" element={<LoginForm />} />
<Route path="/register" element={<RegisterForm />} />
</Routes>
</React.StrictMode>
</Router>
);
}
export default App;
/ This works for me / /这对我有用/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.