How to open pages by id in react-router?

Question

React

How to set up react-router so that you can navigate normally by id
index.js looks like this

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import  { Provider } from 'react-redux';
import { Route } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import AuthProvider from './containers/AuthProvider';
import Home from "./component/Home";
import Auth from "./AuthForm";
import Test from './Test';
import { WithHelmet, withHelmet } from './utils/WithHelmet';
....

ReactDOM.render(
          <Provider store={store}>
            <BrowserRouter>
              <AuthProvider authComponent={withHelmet({ title: 'Авторизация'})(Auth)}>
                  <Route path='/' strict>
                      <WithHelmet title='Главная страница'>
                        <Home />
                      </WithHelmet>
                  </Route>
                  <Route path='/test/:id'>
                      <WithHelmet title='Test'>
                          <Test />
                      </WithHelmet>
                  </Route>
              </AuthProvider>
            </BrowserRouter>
          </Provider>,
    document.getElementById('content')
);

In AutoProvider.js

import React from 'react';
import { connect } from 'react-redux';

const AuthProvider = ({ authenticate, authComponent, children}) => {
    return authenticate ? children : React.createElement(authComponent);
};

export default connect(state => ({
    authenticate: Boolean(state.login.user)
}))(AuthProvider);

And in wuthHelmet.js

import React from 'react';
import Helmet from 'react-helmet';

export const WithHelmet = ({ children, ...helmetProps }) => {
  return (
    <React.Fragment>
      <Helmet>
        {helmetProps.title && (
          <title>{helmetProps.title}</title>
        )}
      </Helmet>

      {children}
    </React.Fragment>
  )
};

export const withHelmet = helmetProps => BaseComponent => props => (
  <WithHelmet {...helmetProps}><BaseComponent {...props} /></WithHelmet>
);

export default WithHelmet;

This was suggested on one forum so to do authorization, I have a problem, there are links to pages on the Home page

<ul>
                        {this.state.item.map(item => (
                            <li key={item.id}>
                                <Link to={`/test/${item.id}`}>{item.name}</Link>
                            </li>
                        ))}
                    </ul>

Only when it goes by id nothing happens except for the url change and the second moment

I have this Test block at the bottom of the block,