无法通过React Router中的网址传递参数数据

时间:2019-07-31 15:24:29

标签: reactjs

我想通过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。

1 个答案:

答案 0 :(得分:1)

From react-router documentation:

。/应用

<Route path="/movie/:movie_id" component={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>;
}