reactjs - 无法通过 React Router 中的 url 传递参数数据

Question

我想通过 URL 插入一些数据，如 ID。

示例：somewebsite.com/movie/(ID_GOES_HERE)

但我无法理解如何实现它。我希望数据进入 url，我想在 movie.js 中检索它，我该怎么做？

我在应用程序中安装了路由器 dom。

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Switch, Route} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import App from './App';
import MovieDetail from './Movie';

const history = createBrowserHistory();

ReactDOM.render(
  <Router history={history}>
    <Switch>
      <Route exact path='/' component={App}/>
      <Route path='/movie' component={Movie}/>
    </Switch>
  </Router>,
       document.getElementById('root')
);

预计会在电影中显示 ID。

标签： reactjs

Answer 1

From react-router documentation:

./App

<Route path="/movie/:movie_id" component={Movie} />;

./Movie

// All route props (match, location and history) are available to Movie
export function Movie(props) {
  return <h1>Show movie {props.match.params.movie_id}!</h1>;
}