我的 ReactJS 项目目前遇到了 React Router 问题。我有一个呈现 View 的页面, View 内部是一个 .map 函数,它映射所有用户并将“first_name”放置在 <h4>
中标签。 map 功能对所有用户都可以正常工作。
我希望能够单击用户的名字,它会导航到以 _id 作为参数的新路线。您导航到的新组件将收到 _id,我将在数据库中搜索它们的 _id。
预期路线:
| URL | Components |
|---------------------|------------|
| `/` | `Main` |
| `/platform` | `Platform` |
| `/platform/:userID` | `Editor` |
目前我有 3 个文件,routes.js
其中包含所有 ReactRouter 配置。 index.js
保存来自数据库的用户渲染列表。还有editor.js
将在 URL 中接收用户 _id 的文件。
// Routes.js
import Main from './components/main';
import Home from './components/home';
import Platform from './components/platform';
import Editor from './components/editor';
<Route name="home" path="/" component={Main}>
<IndexRoute component={Home} />
<Route name="platform" path="platform/" component={Platform}>
<Route name="user" path="/:userId" handler={Editor} />
</Route>
</Route>
// Platform.js
{users.map(({_id, first_name, last_name}, index)=>
<div>
<Link to="user" params={{userId: _id}}>
<h4 style={{fontFamily: 'Raleway', color: '#498EE0'}}>{first_name} {last_name} : {_id}</h4>
</Link>
<hr />
</div>
)}
您应该能够单击Link
并将参数添加到 URL 中。
目前,当我尝试这个时,它简单地附加 /user
到我的网址,所以它出现 localhost:8080/user
最佳答案
您需要将更改为
参数,如下所示 -
<Link to={`/user/${_id}`}>
<h4 style={{fontFamily: 'Raleway', color: '#498EE0'}}>{first_name} {last_name} : {_id}</h4>
</Link>
关于javascript - ReactJS React 路由器参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35530549/