React.jsreact-router-dom@6:单击链接元素会更改url，但不会渲染组件

Question

你好，我目前正在处理'react router dom'@6 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中的链接和路由都需要在相同的路由器中呈现。每个应用程序只需要一个路由器即可为所有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>
);
};