ReactJS 反应路由器参数

Question

我的 ReactJS 项目目前存在 React Router 问题。我有一个呈现视图的页面，视图内部是一个 .map 函数，它映射所有用户并将“first_name”放在<h4> 标记内。地图功能适用于所有用户。

我希望能够单击用户的 first_name 并导航到以 _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

Answer 1

你需要像这样改变to参数 -

<Link to={`/user/${_id}`}>
  <h4 style={{fontFamily: 'Raleway', color: '#498EE0'}}>{first_name} {last_name} : {_id}</h4>
</Link>