2017-11-08 1 views
0

Das Problem ist, dass, wenn ich versuche, einen Weg zu kopieren direkt bekomme ich diesen Fehler:Können Sie direkt in der URL mit react-router-dom suchen?

Cannot Get/home

Aber wenn ich mit den Menüpunkten navigieren ich machen in der Regel die Ansichten, habe ich mehrere Möglichkeiten, wie browserHistory versucht, das zu erreichen Effekt aber es gelingt mir nicht, ich frage mich, wenn react-router-dom Navigation erlaubt es nicht direkt in der URL oder ist es ein Fehler in meinem Code:

// Dependencies 
 

 
import React, { Component} from 'react' 
 
import { render } from 'react-dom' 
 
import { BrowserRouter as Router, Route, browserHistory, Link} from 'react-router-dom' 
 

 
//components 
 

 
class App extends Component{ 
 
    render(){ 
 
     return(
 
      <div> 
 
       <h1>App!</h1> 
 
       <ul> 
 
        <li><Link to="/home"> Home</Link></li> 
 
        <li><Link to="/about"> About </Link></li> 
 
        <li><Link to="/contact"> Contact </Link></li> 
 
       </ul> \t 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
class Home extends Component { 
 
    render() { 
 
     return(
 
      <h2>Home Page!</h2> 
 
     ) 
 
    } 
 
} 
 

 
class About extends Component{ 
 
    render() { 
 
     return(
 
      <h2>About Page!</h2> \t \t \t 
 
     ) 
 
    } 
 
} 
 

 
class Contact extends Component { 
 
    render() { 
 
     return(
 
      <h2>Contact Page!</h2> 
 
     ) 
 
    } 
 
} 
 

 
// routes 
 

 
render(
 
    <Router history={browserHistory}> 
 
     <div> 
 
      <Route component={App} path="/" /> 
 
      <Route component={Home} path="/home" /> 
 
      <Route component={About} path="/about" /> 
 
      <Route component={Contact} path="/contact" /> 
 
     </div> 
 
    </Router>, 
 
    document.getElementById('app') 
 
);

+1

Ich versuchte es replizieren Sie Ihr Problem [hier] (https://codesandbox.io/s/jjn1r4zqny), aber es scheint zu funktionieren. Können Sie versuchen, dort zu replizieren oder versuchen, besser zu erklären, was nicht funktioniert? –

+0

dort, wenn es für mich funktioniert, aber wenn ich es auf meinem Server nicht arbeiten versuchen, ich & Ich benutze Webpack Dev-Serv zum Erstellen des Servers, ist das in Ordnung? – AndrexCode

+0

Ich habe es gelöst! für diejenigen, die denselben Fehler haben, teile ich, was ich getan habe; um das Problem zu sehen, wenn es vom Server war, musste ich webpack mit "historyApiFallback: true" konfigurieren oder "--historyApiCallback" in das Skript des webpack-dev-Servers im package.json-Glück setzen :) – AndrexCode

Antwort

0

Ich habe es gelöst! für diejenigen, die denselben Fehler haben, teile ich, was ich getan habe; um das Problem zu sehen, wenn es vom Server war, musste ich Webpack mit "historyApiFallback: true" konfigurieren oder "--historyApiCallback" in das Skript des Webpack-dev-Servers im package.json Glück setzen :)

Verwandte Themen