如何使用 react-router-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'));

当用户点击“/”时 url 我希望他们出现在登录组件中，但如果我这样做：

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

登录组件总是出现在每条不同的路由上。我的问题是。在着陆页“/”上，我怎样才能让它成为登录组件，但如果我转到用户组件，我不希望它在那里

Answer 1

您可以 <Route path='/' component={Login} exact /> 指定仅在恰好 / 时才渲染该组件，仅此而已。

Answer 2

您应该在路线中使用 exact：

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

此外，您应该考虑使用 Switch 组件来包装您的路由。这将只呈现一条路线。按照设计，React Router 会渲染所有匹配的路由。在此处阅读有关 Switch 的信息：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md

如何使用 react-router-dom 重定向

How to redirect using react-router-dom

javascript

render

reactjs