@hollanditkzn

Как react-router страницы по id открывать?

Как настроить react-router чтобы можно было по id нормально перемещаться
index.js так выглядит
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')
);

В 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);

И в 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;

Это подсказали на одном форуме так сделать авторизацию, у меня проблема, е меня на странице Home есть ссылки на страницы
<ul>
                        {this.state.item.map(item => (
                            <li key={item.id}>
                                <Link to={`/test/${item.id}`}>{item.name}</Link>
                            </li>
                        ))}
                    </ul>

Только когда переходит по id ничего не происхдит кроме изменение url и второй момент
5a6f30e6c1128876536907.png
У меня поялвяется внизу блока этот блок Test,
  • Вопрос задан
  • 3237 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы