react -使用route后看不到任何东西

Question

所以我想做一个应用程序，你填写一个调查，然后去另一个页面。我尝试过使用React路由器。我遵循了一个教程，但当我尝试渲染组件与路由在他们似乎不渲染。没有Route的组件似乎工作得很好。

主要应用:

import Intro from "./pages/intro.js"
function App() {
return (
<div className="App">
<Intro/>
</div>
);
}
export default App;

组件，Route:

import { Routes, useNavigate, Route, Router } from 'react-router-dom';
import B1 from "./B1.js"
function Intro() {
const navigate = useNavigate();
const navigateToB1 = () => {
navigate('./B1.js');
};
return (       
<form>
<h1>Walcome!</h1>
<p><b>plase enter your name:</b></p>
<label>
Name:
<input type="text" name="name" />
</label>
<input
type="submit"
id="sumbit"
value="Submit"
onClick={navigateToB1}
/>

<Router>
<Routes>
<Route path="./B1.js" element={<B1 />} />
</Routes>
</Router>
</form>
);
}
export default Intro;

Answer 1

问题

Intro组件不能使用useNavigate钩子，因为它是呈现Router组件提供useNavigate钩子所需的路由上下文的组件。Intro也不正确地使用了低级别Router组件，该组件缺少几个必需的道具。

路由器

interface RouterProps {
basename?: string;
children?: React.ReactNode;
location: Partial<Location> | string; // <-- required!!
navigationType?: NavigationType;
navigator: Navigator;                 // <-- required!!
static?: boolean;
}

更高级的路由器，(BrowserRouter,HashRouter，等等…)自己管理这个

Intro组件也呈现form元素，并且不阻止在提交表单时发生默认表单操作。如果不这样做，将导致重新加载页面并重新加载整个React应用。

<标题>

解决方案使用一个更高级的路由器，并在ReactTree中将其呈现在比任何需要访问其路由上下文的组件更高的位置。

的例子:应用

import { BroswerRouter } from "react-router-dom";
import Intro from "./pages/intro.js";
function App() {
return (
<div className="App">
<BrowserRouter>
<Intro />
</BrowserRouter>
</div>
);
}
export default App;

介绍

删除路由器并在navigateToB1处理程序中使用onSubmit事件对象来阻止提交表单。

import { Routes, useNavigate, Route } from 'react-router-dom';
import B1 from "./B1.js";
function Intro() {
const navigate = useNavigate();
const navigateToB1 = (e) => { // <-- consume onSubmit event object
e.preventDefault();         // <-- prevent the default form action
navigate('/B1.js');
};
return (       
<form>
<h1>Welcome!</h1>
<p><b>Please enter your name:</b></p>
<label>
Name:
<input type="text" name="name" />
</label>
<input
type="submit"
id="submit"
value="Submit"
onClick={navigateToB1}
/>

<Routes>
<Route path="/B1.js" element={<B1 />} />
</Routes> 
</form>
);
}
export default Intro;

Answer 2

你也可以在app.tsx或.js文件中声明你的路由。但这取决于你，一般来说，如果你想添加到当前路由中，你就在子组件中声明你的路由。假设你的组件路由到'/Intro'然后你在'Intro'组件中添加路由以定向到'/Intro/B1.js'

react-router也有一个新版本:注意不要查看文档的错误版本。关于使用"路由器"组件:https://reactrouter.com/en/main/router-components/router。BrowserRouter可能会满足你的需求

类型声明是由所有路由器组件(如和)共享的低级接口。在React中，是一个上下文提供程序，为应用程序的其余部分提供路由信息。

您可能永远不需要手动渲染。相反，您应该根据您的环境使用一个更高级的路由器。在一个给定的应用中，你只需要一个路由器。

可以用来使应用中的所有路由和链接相对于一个"基"。它们都共享的URL路径名的一部分。当你的应用程序有多个入口点时，这在React Router只渲染较大应用程序的一部分时很有用。基本名不区分大小写。

试试这个:

function Intro() {
const navigate = useNavigate();
const navigateToB1= () => 
{
navigate('./B1.js');
};
return ( 
<>      
<form>
<h1>Walcome!</h1>
<p><b>plase enter your name:</b></p>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" id="sumbit" value="Submit" onClick={navigateToB1} />

</form>
<BrowserRouter>
<Routes>
<Route path="./B1.js" element={<B1/>} />
</Routes>
</BrowserRouter
</>
);
}
export default Intro;