H
H
hollanditkzn2018-01-29 17:34:36
React
hollanditkzn, 2018-01-29 17:34:36

How to open pages by id in react-router?

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
5a6f30e6c1128876536907.png
I have this Test block at the bottom of the block,

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question