this.props.children не работает с реакции-маршрутизатором - PullRequest
Новая
       6

this.props.children не работает с реакции-маршрутизатором

0 голосов
/ 20 мая 2018

Я пытаюсь сделать навигацию на моем сайте по реакции-роутеру и машинописи.но он не работает, и вместо домашней страницы я получаю пустую страницу

Это мой файл app.tsx 

// app.tsx

import * as React from 'react';
import '../App.css';

class App extends React.Component<any,any> {
  public render() {
    return (
      <div>
          {this.props.children}
      </div>
    );
  }
}

export default App;

index.tsx 

// index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {AppRouter} from './router';


ReactDOM.render(
  <AppRouter/>,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

router.tsx

import * as React from 'react';
import { Route,Router } from 'react-router';

import App from './components/App';

import HomePage from './components/home/HomePage';

import createHistory from 'history/createBrowserHistory';

const history = createHistory();

export const AppRouter = () => {
    return (
        <Router history={history}>
            <Route path="/" component={App} >
                <Route path="/" exact={true} component={HomePage} />
            </Route>
        </Router>
    );
}

Я действительно не знаю, что сказать.Я не могу найти любую возможную информацию об этом.Если вы знаете лучший способ сделать навигацию с помощью машинописи, реагирования и редукции, я открыт для идей.ТНХ

1 Ответ

0 голосов
/ 21 мая 2018

В компоненте приложения вы делаете {this.props.children}.Таким образом, вы не должны передавать этот компонент какому-либо маршруту.

Вам необходимо добавить все маршруты как дочерний элемент этого компонента, через который вы получите дочерние элементы в своих подпорках.

Также дляпереключаясь между маршрутами, вы должны связать все маршруты в «Коммутаторе», импортированном из activ-router.

Итак, ваш файл router.tsx должен выглядеть следующим образом: 

import * as React from 'react';
import { Route, Router, Switch } from 'react-router';
import App from './components/App';
import OtherComponent from './components/OtherComponent';
import HomePage from './components/home/HomePage';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

export const AppRouter = () => {
  return (
    <App>
      <Router history={history}>
        <Switch>
          <Route exact={true} component={HomePage} />
          <Route path="/other" component={OtherComponent} />
        </Switch>
      </Router>
    </App>
  );
}

Таким образом,вы получите компонент 'HomePage' на маршруте '/' и OtherComponent на маршруте '/other'.

...