Typescript React React-Router V4 没有路由答案

【问题标题】：Typescript React React-Router V4 not routingTypescript React React-Router V4 没有路由
【发布时间】：2017-06-22 23:03:33
【问题描述】：

我的代码正在编译和运行，但无法正常工作。我不知道我做错了什么。以下代码示例是（我认为是相关的）各自文件的摘录。

package.json

"dependencies": {
"@types/react": "^15.0.28",
"@types/react-dom": "^15.5.0",
"@types/react-router": "^4.0.11",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.1",
"typescript": "^2.3.4"
},

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import Bids from './Bids';
import { MemoryRouter, Route, Switch} from 'react-router';

ReactDOM.render(
  <MemoryRouter>
    <Switch>
      <Route exact path="/bids" component={() => <Bids />} />
      <Route exact path="/" component={() => <App />} />
    </Switch>
  </MemoryRouter>
 ,
  document.getElementById('root') as HTMLElement
);

Bids 和 App 都是具有简单“hello world”渲染功能的 react 组件

class App extends React.Component<{}, null> {
  render() {

我遇到的问题是我无法让我的程序呈现非默认路径。

如果我导航到“http://localhost:3000/”，我会得到 App 组件。
如果我导航到“http://localhost:3000/bids”，我会得到 App 组件。
如果我导航到“http://localhost:3000/randomString”，我会得到 App 组件。

如果我在代码中切换它们（即“/bids”指向 App，“/”指向 Bids）那么我只能在任何路径上看到 Bids 组件。

有什么想法吗？

【问题讨论】：

你试过先放/，然后再放/bids吗？
是的。根本不会改变行为。
为什么是MemoryRouter？从文档中它说它does not read or write to the address bar.
您是否尝试过使用react-router-dom 包而不是react-router？

标签： reactjs typescript react-router

【解决方案1】：

多亏了 cmets（Jesse 和 Alex），我们才得到了答案。切换到 react-router-dom 和 BrowserRouter 解决了这个问题。

"@types/react": "^15.0.28",
"@types/react-dom": "^15.5.0",
"@types/react-router-dom": "^4.0.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.1.1",
"typescript": "^2.3.4"

和

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import Bids from './Bids';
import {BrowserRouter, Route, Switch} from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route exact path="/bids" component={() => <Bids />} />
      <Route exact path="/" component={() => <App />} />
    </Switch>
  </BrowserRouter>
 ,
  document.getElementById('root') as HTMLElement
);

【讨论】：

【解决方案2】：

你最常安装包 react-router-dom

yarn add react-router-dom -W

npm i react-router-dom --save

【讨论】：