Routing funktioniert nicht in reactjs Anwendung

Question

Ich habe eine reactjs App mit drei Seiten (Komponenten), App, Login und Register, wo ich von Seite zu Seite navigieren muss durch Eingabe der URL im Browser, aber die Navigation funktioniert nicht erstellt für mich. Wenn Sie eine URL eingeben, wird nur die Seite "App" angezeigt.

Folgenden ist der Code, den ich in main.js-Datei der App und die URL geschrieben haben, dass ich so etwas wie dieses http://localhost:8080/#/login oder http://localhost:8080/#/reg

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter as Router, Route, NavLink, Redirect, Switch, hashHistory} from 'react-router-dom' 
import App from './../jsx/App.jsx'; 
import Login from './../jsx/Login.jsx'; 
import Register from './../jsx/Register.jsx'; 

ReactDOM.render((
    <Router history={hashHistory}> 
     <div> 
      <Route path="/" component={App}/> 
      <Route path="/login" component={Login}/> 
      <Route path="/reg" component={Register}/> 
     </div> 
    </Router> 

), document.getElementById('app')) 

Answer 1

Sie müssen die Route konfigurieren, navigieren bin mit schaut zu Passen Sie den Root-Pfad genau an. Versuchen Sie, diese ...

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

Answer 2

entfernen / von Ihrem Weg in Route Weg in

<Route path="/login" component={Login}/> 
      <Route path="/reg" component={Register}/> 

dies versuchen, es funktioniert für mich

Eintrag Klasse

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Layout from './Component/Layout.jsx'; 
import { Router, Route, IndexRoute, hashHistory } from "react-router"; 

import Archives from './Component/Archives.jsx'; 
import Settings from './Component/Settings.jsx'; 

import Featured from './Component/Featured.jsx'; 

ReactDOM.render(
<Router history={hashHistory}> 
<Route path="/" component={Layout}> 
//<IndexRoute component={Featured}></IndexRoute> 
<Route path="archives" name="archives" component={Archives}></Route> 
<Route path="settings" component={Settings}></Route> 
<Route path="featured" component={Featured}></Route> 
</Route> 
</Router>, 
document.getElementById('app')); 

Layout class 
{ 
render{ 

return(
<div> 
     {this.props.children} 
     <ul> 
     <li><Link to="archives">archives</Link></li> 
     <li><Link to="settings">settings</Link></li> 
     <li><Link to="featured">featured</Link></li> 
     </ul> 

</div> 

); 
} 


} 

Answer 3

Wenn Sie verwenden reactor router 4, dann sieht das gut aus. Sie können jedoch versuchen, eine wie folgt zu verwenden:

<BrowserRouter> 
    <Switch> 
     <Route path="/" component={Home} /> 
    </Switch> 
</BrowserRouter> 

Dies ist in den neuesten Versionen von reagieren. Die Hauptkomponente ist wie folgt:

render() { 
    return (
     <div> 
      <p>Header Section</p> 
      <Header/> 
      <p>Home component</p> 
      <Link to="/search">search</Link> 
      <Route path="/search" component={Search}/> 
     </div> 
    ); 
} 

So wohl, was Sie tun müssen, ist, einfach einen Schalter hinzuzufügen. Andere Lösungen sind möglicherweise ebenfalls möglich. Hoffe, das hilft :)

Answer 4

Verwenden Sie BrowserRouter und Switch von 'react-router-dom' Wenn Sie BrowserRouter verwenden, keine Notwendigkeit, Geschichte als Requisiten übergeben, wie es selbst behandelt.

Versuchen Sie es.

<Router> 
     <Switch> 
      <Route exact path="/" component={App}/> 
      <Route exact path="/login" component={Login}/> 
      <Route exact path="/reg" component={Register}/> 
     </Switch> 
</Router>