如何使用反應路由器-DOM重定向

Question

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import {Provider} from 'react-redux'; 
 
import {createStore, applyMiddleware} from 'redux'; 
 
import thunk from 'redux-thunk'; 
 
import Reducer from './Reducer/'; 
 
import {HashRouter as Router, Route, Redirect} from 'react-router-dom'; 
 

 
import Login from './Components/login.jsx'; 
 
import User from './Components/User.jsx'; 
 

 

 

 

 

 

 

 

 
const store = createStore(Reducer, applyMiddleware(thunk)); 
 

 

 
    
 

 
ReactDOM.render(
 
    
 
    <Provider store={store}> 
 
     <Router> 
 
      <div>    
 
       <Route path='/login' component={Login}/> 
 
       <Route path='/user' component={User}/> 
 
      </div> 
 
     </Router> 
 
     
 
    </Provider> 
 
    
 

 
    ,document.getElementById('root'));

當用戶點擊了「/」網址我想他們是在登錄組件，但如果我這樣做：

<Route path='/' component={Login}/>

登錄組件始終顯示在每個不同的路線上。 我的問題是。在着陸頁上「/」如何使它成爲登錄組件，但我不希望它在那裏，如果我去用戶組件

Answer 1

你可以做<Route path='/' component={Login} exact />指定只渲染該組件完全/，沒有更多。

Answer 2

你應該在你的路線確切使用方法：

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

此外，你應該考慮使用交換機部件來包裝你的路線。這將完全呈現一條路線。按照設計，React Router呈現所有匹配的路由。閱讀關於Switch的信息：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md