0

i am so sorry to make the similar question with React Router v4 routes not working

because i not have enough reputation to comment the answer, so i create new question

i am so sorry about that

actually i have same problem, and i already try the solution from the answer and follow https://reacttraining.com/react-router/web/guides/quick-start but when i try to add 'exact' on route, its not show anything

i use

"react": "^16.0.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

and this is my app.js code

'use strict'

import React from 'react';
import {render} from 'react-dom';
import {
  BrowserRouter,
  Route
} from 'react-router-dom';
import Home from './home/home.js'
import Login from './login/'
import SignUp from './login/SignUp/'

render((
  <BrowserRouter>
    <div>
      <Route path="/" component={Login} />
      <Route path="/home" component={Home} />
    </div>
  </BrowserRouter>
),document.getElementById('container'));

**edit

this is my folder structure

enter image description here

** edit

finally i found the solution, this is my app.js code 'use strict'

import React from 'react';
import ReactDOM from 'react-dom';
import {
  HashRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import Home from './home/home.js'
import Login from './login/'
import SignUp from './login/SignUp/'

ReactDOM.render((
  <Router>
    <Switch>
      <Route exact path="/" component={Login} />
      <Route path="/signup" component={SignUp} />
      <Route path="/home" component={Home} />
    </Switch>
  </Router>
),document.getElementById('container'));

thanks

Nur Diarto
  • 55
  • 2
  • 10
  • 1
    Where do you saved Login and Home components? May i know the path.? Because while importing you have mentioned an incomplete path './login/SignUp/' – Narasimha Reddy - Geeker Oct 24 '17 at 10:58
  • i am sorry about that, i think the problem its not from component path because i have try to change with other component and its work correctly. my problem is when i try to use more than 1 route i can't access other route beside route root path – Nur Diarto Oct 25 '17 at 01:32
  • I am deleting my post, since I made an error. Sorry about it. `BrowserRouter` will render ALL the `Route`s which matches the given pattern. If we use ``, only the first `` which matches will be rendered. https://reacttraining.com/react-router/web/api/Switch – anand Oct 25 '17 at 03:48
  • i already try to change
    to , i want to confirm something for if i go to http:localhost/my-project/ it will show the Login component right? when the url http:localhost/my-project/home it will show Home component(in my route code), but its not found i think the problem maybe in url
     – Nur Diarto Oct 25 '17 at 04:56
  • finally i found the solution, i change browserRouter to HashRouter. thank you all – Nur Diarto Oct 25 '17 at 07:41
  • 1
    Possible duplicate of [React Router failed prop 'history', is undefined](https://stackoverflow.com/questions/42845303/react-router-failed-prop-history-is-undefined) – Nicholas Oct 25 '17 at 08:11

1 Answers1

0

You have to import BrowserRouter as Router

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import Home from './home/home.js'
import Login from './login/'
import SignUp from './login/SignUp/'

ReactDOM.render((
  <Router>
    <Switch>
      <Route exact path="/" component={Login} />
      <Route path="/signup" component={SignUp} />
      <Route path="/home" component={Home} />
    </Switch>
  </Router>
),document.getElementById('container'));
M. Foldager
  • 190
  • 14
Nicholas
  • 3,529
  • 2
  • 23
  • 31