2017-06-22 29 views
0

Mein Code kompiliert und läuft, aber gerade nicht funktioniert. Ich habe keine Ahnung, was ich falsch mache. Die folgenden Codebeispiele sind (was ich für relevant halte) Auszüge aus ihren jeweiligen Dateien.Typescript React React-Router V4 nicht Routing

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

und Gebote und App sind beide Komponenten mit einfachen reagieren "Hallo Welt" machen Funktionen

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

Das Problem, das Ich habe, ist, dass ich mein Programm nicht bekommen kann, um den Nichtstandardweg zu rendern.

Wenn ich zu "http://localhost:3000/" navigiere bekomme ich die App-Komponente.
Wenn ich zu "http://localhost:3000/bids" navigiere, bekomme ich die App-Komponente.
Wenn ich zu "http://localhost:3000/randomString" navigiere, bekomme ich die App-Komponente.

Wenn ich sie in den Code (d. H. "/ Gebote" zeigt auf App und "/" auf Gebote) dann kann ich nur die Bids-Komponente auf einem beliebigen Pfad sehen.

Irgendwelche Gedanken?

+0

Haben Sie versucht, Putting '/' zuerst, dann '/ bids'? – Li357

+0

Ja. Ändert das Verhalten überhaupt nicht. –

+1

Warum 'MemoryRouter'? Aus den Dokumenten geht hervor, dass [die Adresszeile nicht gelesen oder geschrieben wurde] (https://github.com/ReactTraining/reac- torrouter/blob/master/packages/reac- router/docs/api/MemoryRouter.md)). –

Antwort

0

Dank der Kommentare (Jesse und Alex) kam die Antwort zusammen. Der Wechsel zu reaze-router-dom und BrowserRouter hat das Problem gelöst.

"@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" 

und

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