2017-06-22 160 views
0

我的代码正在编译和运行,但只是不工作。我不知道我在做什么错。以下代码示例是(我相信是相关的)摘录自各自的文件。Typescript React React-Router V4不能路由

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

出价和应用程序都反应的组分与简单的 “Hello World” 的渲染功能

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

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

如果我导航到“http://localhost:3000/”,我得到应用程序组件。
如果我导航到“http://localhost:3000/bids”,我得到应用程序组件。
如果我导航到“http://localhost:3000/randomString”,我得到应用程序组件。

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

有什么想法?

+0

您是否尝试过把'/',然后再'/ bids'? – Li357

+0

是的。根本不会改变行为。 –

+1

为什么'MemoryRouter'?从文档说,它[不读取或写入地址栏](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md )。 –

回答

0

感谢评论(杰西和亚历克斯)的答案是一起来的。切换到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 
);