反應路由器dom：路由和路由器根本不起作用

Question

我對做出反應並嘗試使用 react-router-dom 進行重定向相當陌生，我將所有內容都作為文檔進行，但我的代碼似乎不起作用。 我收到關於未找到元素的錯誤，我不明白是什么原因造成的。 另外，我現在只是嘗試使用地址欄而不是任何按鈕或鏈接來訪問該頁面。

錯誤

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.

/register 的相同錯誤

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();

應用程序.js

import { Component } from 'react';

class App extends Component {
  render(){
    return (
      <div>
        HELLO WORLD
      </div>
    );
  }
}


export default App;

注冊.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>
  );
}

Answer 1

您沒有正確渲染路由組件。 它們應該在element prop 上呈現為 JSX，而不是對組件的引用。 這是react-router-dom版本 5 和 6 之間的重大變化。 還要注意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')
);

Answer 2

你能稍微修改一下你的index.js並再試一次嗎：

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

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();

這應該有效。

Answer 3

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;

/這對我有用/