this.props.children不与react-router一起使用

Question

i am trying to make a navigaton on my website by react-router and typescript. but its not working and instead of Home page i get an empty page

Thats my app.tsx file

// 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>
    );
}

i dont really dont know what to say. i cant find any possible info about this. If u know better way to make navigation with typescript, react and redux i am open for ideas. thx

Answer 1

In the App component, you are doing {this.props.children}. So you should not pass that component to any route.

You need to add all the routes as a child of that component through which you will get the children in your props.

Also, for switching between routes, you should bind all the routes in the 'Switch' imported from react-router.

So, your router.tsx file should look like:

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

By this, you will get the 'HomePage' component at route '/' and OtherComponent at route '/other'.