reactjs - 在带有 TSX 的 typescript 1.6 中使用 react-router 运行示例

Question

有人使用 react-router 但使用 typescript 1.6+ TSX 开发的反应应用程序的完整运行示例吗？

Answer 1

我有一个我命名为generator-react-bootstrap-typescript-webpack：

您可以在文件中找到配置的应用程序路由器app.tsx。你也可以在 yeoman 中找到很多。

Answer 2

以下是将路由器添加到应用程序的步骤

安装 react-router-dom 和类型

1- npm install react-router-dom --save npm install @types/react-router-dom --save-dev

2- 在您的 Index.tsx 中包装 App 组件

ReactDOM.render(
   <BrowserRouter><App /></BrowserRouter>,
   document.getElementById('root') as HTMLElement

);

3-在应用程序组件中

export  const App : React.StatelessComponent = () => 
{
return  <div>
        <Route  exact={true}  path="/"   component={HomePage}/>
        <Route path="/login" component={LoginPage}/>
        </div>
}

4-主页和登录组件

export const HomePage = () => {
return <div>
       <h1> Home Page</h1>
       <Link  to="/login" >Login</Link>
       </div>
}

export const LoginPage : React.StatelessComponent = () => {
return <div>
        <h1>Login Page</h1>
        </div>
}