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 附加到我的 URL 上，所以它显示 localhost:8080/user

Answer 1

您需要像这样更改 to 参数 -

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

ReactJS 反应路由器参数

ReactJS React Router params

javascript

mongoose

reactjs

react-router