CODEWITHSUNDEEP
reactjstypescript
TyForHelpDude
TyForHelpDude

Reputation: 5002

implement react-router within typescript app

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

enter image description here 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 ?

Upvotes: 1

Views: 872

Answers (1)

Craig O&#39;Connor
Craig O&#39;Connor

Reputation: 163

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.

Upvotes: 1

Related Questions