Именованный путь не работает в реакции-маршрутизатор-дом реагировать JS

Question

Я использую react-router-dom для целей маршрутизации. Это мой код:

//Libraries
import React from 'react';
import { Tabs, Tab } from 'react-tabify';
import { connect } from 'react-redux';
import {
  BrowserRouter as Router,
  Route,
  withRouter
} from 'react-router-dom';

//Components
import HomePage from './containers/HomePage';
import PersonsPage from './containers/PersonsPage';

const App = () => (
  <Router>
    <div style={{height: '100%', width: '100%'}}>
      <Route exact path="/" component={HomePage}/>
      <Route exact path="/:id" component={PersonsPage}/>

      // here i want to use like this --> <Route exact path="/personPage/:id" component={PersonsPage}/>


    </div>
  </Router>
)
export default withRouter(connect()(App));

Route exact path="/:id" component={PersonsPage}/> это работает, но это Route exact path="/personPage/:id" component={PersonsPage}/> это не работает для меня. Может кто-то уточнить / помочь мне из этого, пожалуйста

Answer 1

Я думаю, что вы должны просто обернуть свои маршрутизаторы в компонент Switch. Но не забудьте поставить <Route exact path="/:id" component={PersonsPage}/> как последняя запись.

Здесь у вас есть пример в одном файле:

import React, { Component } from 'react';
import { render } from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  withRouter
} from 'react-router-dom';

const HomePage = () => (
  <div>
    <h1>HomePage</h1>
    <ul>
      <li><Link to="/user/Tom">Tom</Link></li>
      <li><Link to="/user/John">John</Link></li>
      <li><Link to="/user/Andy">Andy</Link></li>
    </ul>
  </div>
);

const PersonsPage = (props) => (
  <div>
    <h1>Profile: {props.match.params.name}</h1>
  </div>
);

class App extends Component {
  render() {
    return (
      <Switch>
        <Route exact path="/" component={HomePage}/>
        <Route exact path="/user/:name" component={PersonsPage}/>
      </Switch>
    );
  }
}

const AppWithRouter = withRouter(App);

render(
  <Router>
    <AppWithRouter />
  </Router>
  , document.getElementById('root')
);

Здесь у вас есть ссылка на рабочую версию https://stackblitz.com/edit/react-qqpraz