React Router-搜索栏重定向到/profile/X页面

Question

我想为我的React项目添加一个关键功能。这个想法是有一个主页，它的作用就像一个登陆页。在这个主页("localhost:3000/Home"(中，有一个搜索表单，可以让您检索在其中键入的帐户的一些统计信息。我想用React Router重定向到一个新页面("localhost:3000/profile/X"，其中X是在主页搜索栏中键入的帐户名(，该页面显示搜索到的帐户X的统计信息。此外，应用程序应该"；听"；即使在浏览器的URL栏中手动键入帐户，也可以重定向：因此，要访问帐户X的统计页面，用户可以在搜索表单中键入"；X〃；并点击提交以重定向到"/轮廓//X"；，而且用户应该能够通过在URL搜索栏中手动键入"来看到该页面；localhost:3000/profile/X"；，而不必登陆主页并使用表单进行搜索。

我的意图是创建一个Profile.jsReact组件，它会立即调用(fetch(((第三方API来检索统计信息。该组件应该读取URL(同样，应该类似于"localhost:3000/profile/JonSnow"(，然后提取"；JonSnow"部分，以该字符串作为参数进行API调用。这里的问题是读取URL，我想到了使用React Router钩子useParams:

Profile.js

// import statements
export const Profile = () =>
{
const { param } = useParams();
fetch("externalapi.com/${param}")  // .then(.........)
}

老实说，我不确定{param}是如何获取我想要的URL部分的。这肯定与Routes组件中如何定义Route有关(附在下面的index.js(。

现在路由文件应该是这样的：

index.js

{
// import statements

<BrowserRouter>
<Routes>
<Route exact path="/home" element={ <App /> } />
<Route path="/about" element={ <About /> } />
<Route path="/contacts" element={ <Contacts /> } />
<Route path="/profile" element={ <Profile /> } >
<Route path="????" element={ <Profile /> } />
</Route>
</Routes>
</BrowserRouter>

我发现/profile的嵌套路由可能很方便，但我不知道如何使path="quot；在该嵌套路由中，以适用于可能具有任何字符串的每个调用。换言之，我该如何让BrowserRouter监听"/profile/whateverStringIsTyped">

此外，这是登录页组件：App.js

// import statements
function App() {
return (
<div className="App">
<form className="accountSearch" onSubmit={(event) => { event.preventDefault(); } }>
<input type="search" id="search-recent" placeholder="Enter a name..."></input>                
<Link to={location => {  elem = document.getElementById("search-recent");
return ("/profile/" + elem.value() ); }} >      
<button type="submit">Search</button>
</Link>
</form>
</div>
);
}
export default App;

这是第三个问题：除了不使用钩子useRef而不是document.getElementById之外，使用React Router Link组件重定向到"；localhost:3000/profile/X"？

Answer 1

如果Profile是组件基于路由路径参数执行提取，那么我建议如下：

在两个路径上渲染Profile，一个路径带有路由参数，另一个路径没有。

<BrowserRouter>
<Routes>
<Route path="/home" element={<App />} />
<Route path="/about" element={<About />} />
<Route path="/contacts" element={<Contacts />} />
<Route path="/profile">
<Route index element={<Profile />} />
<Route path=":id" element={<Profile />} />
</Route>
</Routes>
</BrowserRouter>

Profile组件读取id路由路径参数，并在useEffect挂钩中发出获取请求(如果存在(。

export const Profile = () => {
const { id } = useParams();
const [data, setData] = React.useState();
useEffect(() => {
fetch("externalapi.com/${id}")
.then(response => {
// update local state with fetched data
});
}, [id]);
return data ? (
...JSX for fetched data...
) : (
<div>No Data</div>
);
};

另请参阅：

• 定义路线
• 匹配参数

我可能建议使用带有navigate函数的button元素，而不是Link组件，通过form元素的onSubmit操作发布命令式导航操作。

示例：

import { useNavigate } from 'react-router-dom';
function App() {
const navigate = useNavigate();
const search = e => {
e.preventDefault();
navigate("/profile/" + e.target.search.value);
};
return (
<div className="App">
<form className="accountSearch" onSubmit={search}>
<input
type="search"
id="search"
placeholder="Enter a name..."
/>
<button type="submit">Search</button>
</form>
</div>
);
}