javascript - ReactJS React 路由器参数

Question

我的 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

Answer 1

您需要将更改为参数，如下所示 -

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