React.js react-router-dom@6: 单击 Link 元素会更改 url 但不会呈现组件

Question

你好，我目前正在努力处理 'react-router-dom' @6 Link 元素。单击属于 Link 元素的注册文本允许浏览器 url 成为 localhost:5000 -> localhost:5000/注册但仍然没有出现注册组件。我不知道在哪里更正我的代码。

import Form from './components/form';
import Comments from './components/comments';
import Header from './components/header';
import Signup from './components/signup';
import { useState } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import './styles/app.scss';

function App() {
    const [ text, stateText ] = useState('');
    const [ user, stateUser ] = useState({});

    return (
        <div className="App">
            <Header />
            <BrowserRouter>
                <Routes>
                    <Route path="/comments" element={<Comments text={text} />} />
                    <Route path="/signup" element={<Signup />} />
                    <Route
                        path="/"
                        element={<Form text={text} stateText={stateText} user={user} stateUser={stateUser} />}
                    />
                </Routes>
            </BrowserRouter>
        </div>
    );
}

export default App;

下一个是header.js

import { BrowserRouter, Routes, Route, Router, Link} from 'react-router-dom';

const Header = () => {
    return (
        <div className="header_component">
            <BrowserRouter>
                <Link to="/signup">Signup</Link>
            </BrowserRouter>
        </div>
    );
};

export default Header;

最后，下面的那个是index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Header from './components/header';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

Answer 1

Header中的链接和路由都需要在same路由器中渲染。每个应用程序只需要一个路由器来为所有 Link、Routes、Route、Navigate、Outlet 组件和所有 RRD 挂钩提供路由上下文。

将 Header 移动到 App 中的 Router 并删除 Header 组件中的 Router。

function App() {
  const [ text, stateText ] = useState('');
  const [ user, stateUser ] = useState({});

  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Routes>
          <Route path="/comments" element={<Comments text={text} />} />
          <Route path="/signup" element={<Signup />} />
          <Route
            path="/"
            element={<Form text={text} stateText={stateText} user={user} stateUser={stateUser} />}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

...

const Header = () => {
  return (
    <div className="header_component">
      <Link to="/signup">Signup</Link>
    </div>
  );
};

React.js react-router-dom@6: 单击 Link 元素会更改 url 但不会呈现组件

React.js react-router-dom@6: Clicking Link element changes the url but not renders components

hyperlink

reactjs

react-router-dom