implement react-router within typescript app

Question

I have a working copy of the same code only differs come from typescript. And this the code below somehow and exception message..

import * as React from 'react';
import Home from '../Home/Home';
import User from '../User/User';
import {
  BrowserRouter as Router,Route,Link,Switch} from 'react-router-dom'

class Layout extends React.Component<{},{}> {
  render() {
    return (
    <Router>
      <div className="App">
        <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/user/:id" userid="25" component={User}/>
        <Route component={Notfound}/>
        </Switch>
      </div>
  </Router>
    );
  }
}

and one of my component, home.tsx:

import * as React from 'react';

class Home extends React.Component<{},{}> {
  render() {
    return (
      <div className="App">

        Welcome Home Page!
      </div>
    );
  }
}

Whats wrong here ?

For components without props/state, use any as the type, e.g. class Home extends React.Component<any, any> {. Not sure if it's what's causing the error, but seems likely. — zeh
– zeh, Commented Mar 26, 2017 at 15:10
@zeh hey man I did you said and error is gone.. can you eloborate why you feel its solution.. then I happily accept it as answer of post. — TyForHelpDude
– TyForHelpDude, Commented Mar 29, 2017 at 19:20
It's because any is any type of parameter, while {} is a single object with no properties, which I assume is now supported by TypeScript as a type because of the new union types. — zeh
– zeh, Commented Mar 30, 2017 at 19:59

Craig O'Connor · Accepted Answer · 2017-03-29 21:51:28Z

1

Here is how I fixed the problem. As a commenter explained, there is some confusion for the compiler on how to explicitly handle passing in props.

App.tsx:

import * as React from 'react';

import './App.css';

interface State { }

// tslint:disable-next-line
class App extends React.Component<any, State> {
  render() {
    return (
      <div className="App">
        HIIIII
      </div>
    );
  }
}

export default App;

index.tsx:

...

ReactDOM.render(
  <Router>
    <div>
      <Route path="/" component={App} />
    </div>
  </Router>,
  document.getElementById('root') as HTMLElement
);

I have not found a better solution yet. But this will indeed work.

answered Mar 29, 2017 at 21:51

Craig O'Connor

1733 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

implement react-router within typescript app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related