2017-04-17 21 views
5

Ben tepki vermek nispeten yeni ve React yönlendirici çalışmak için nasıl anlamaya çalışıyorum. Şöyle bir süper basit bir test uygulaması var:React Router v4 yolları çalışmıyor

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom'; 

const Home =() => <h1><Link to= "/about">Click Me</Link></h1> 
const About =() => <h1>About Us</h1> 

const Test =() => (
    <Router> 
    <Switch> 
    <Route path ="/" component = {Home} /> 
    <Route path ="/about" component = {About} /> 
    </Switch> 
    </Router> 
) 

ReactDOM.render(<Test />, document.getElementById('app')); 

Ben herhangi bir sorun olmadan uygulaması ana bileşen yükleri çalıştırın ve Tıkladığımda "Click Me" localhost URL değişiklikleri bağladığınızda/Ancak, hiçbir şey olmuyor. Yenile tıklarsam, "GET/About olamaz." Açıkçası yanlış bir şey yapıyorum ama ne olduğunu anlayamadım. Ben de Webpack kullanıyorum.

+0

konsolunda mesaj var mı senin webpack.config dosyasına doğrudur? Yönlendiricinin kendisi değil, 'Hakkında' bileşeniyle ilgili bir sorun olabilir. Ayrıca, neler olduğunu görmek için 'Hakkında' bileşenini */* yoluna koymaya çalışın. – gretro

+0

RE: GET/about: [create-react-app] 'ı kullanmayı düşünün (https://github.com/facebookincubator/create-react-app). Bu facebook kutsanmış ve diğer birçok gelişme aralarında, bu işin bir parçası sunucu geliştirme, geliştirme kutusundan çıkarır. Bu olmadan, her şeyi index.html'ye yönlendirmeyi veya yanıt yönlendiricisinde karma yönlendiriciyi kullanmanız gerekir. –

cevap

9

/ için tam yolu kullanmanız gerekir, aksi takdirde /about ile eşleşecek. Ben senin sunucu kodu ve webpack ayarları tüm doğru olduğundan emin yapacaktır Create React App kullanarak öneririm bu basit bir şey için, yorum belirtildiği gibi

<Route exact path="/" component={Home} /> 

. create-react-app'u kullandıktan sonra tepki yönlendiricisi v4 paketini yüklemek için npm'u kullanmanız ve daha sonra kodunuzu App.js dosyasına koymanız ve işe yarayacağını unutmayın. Aşağıda görüleceği gibi create-react-app ile çalışmak için almak için kodunuzda bazı küçük değişiklikler var:

// App.js 
import React from 'react'; 

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; 

const Home =() => <h1><Link to="/about">Click Me</Link></h1> 
const About =() => <h1>About Us</h1> 

const App =() => (
    <Router> 
    <Switch> 
     <Route exact path="/" component={Home} /> 
     <Route path="/about" component={About} /> 
    </Switch> 
    </Router> 
) 

export default App; 

quick start instructions from React Router V4 documentation hemen hemen aynı Sadece açıklandığı gibi söyleyecektir.

6

Eğer historyApiFallback eklemeniz gerekir localhost dan çalıştırıyorsanız:

+0

Bu benim sorunumdu! Teşekkür ederim. – Kate

+3

Bu konuda biraz daha fazla bilgi gerçekten yararlı olacaktır! – DanV

İlgili konular