简体   繁体   中英

React-Router not working

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

在此处输入图片说明

** 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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM