ReactJS React Router參數

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>