如何在 React 中重定向时渲染组件？

Question

这是我的代码

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import WelcomePage from './pages/welcome-page/welcome-page.component';
import WelcomeBackPage from './pages/welcome-back-page/welcome-back-page.component';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

function App() {
  let [ visitedFirstTime ] = useState(true);
  return (
    <div>
      <Router>
        <Switch>
          <Route exact path = '/'> 
            {visitedFirstTime ? 
              <Redirect to = '/welcome'>
                <WelcomePage/>  
              </Redirect>
            :   
              <WelcomeBackPage/> 
            } 
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

虽然那是我的代码，但我对这部分特别好奇：

          <Route exact path = '/'> 
            {visitedFirstTime ? 
              <Redirect to = '/welcome'>
                <WelcomePage/>  
              </Redirect>
            :   
              <WelcomeBackPage/> 
            } 
          </Route>

每当我加载页面时，它都会成功重定向到 /welcome。但是，应该渲染的WelcomePage组件没有渲染。

如果我犯了任何重大的 React Router 错误，我深表歉意，我是 React Router 的新手。谢谢你的时间。

Answer 1

您需要有一个路由来处理 /welcome 路由。现在你有一个 <Route exact path = '/'> ...render stuff...</Route> 这将呈现“/”路径下的任何内容。在“/”路由下方的 switch 语句中放置一个 <Route exact path = '/welcome'> <WelcomePage/> </Route>。重定向将运行将它们发送到 /welcome route.This 将呈现路由 (/welcome) 提供的组件，即 <WelcomePage/>。最终代码看起来像这样。

function App() {
  let [ visitedFirstTime ] = useState(true);
  return (
    <div>
      <Router>
        <Switch>
          <Route exact path = '/'> 
            {visitedFirstTime ? 
              <Redirect to = '/welcome'/>
            :   
              <WelcomeBackPage/> 
            } 
          </Route>
          <Route exact path = '/welcome'>
            <WelcomePage/>  
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

如何在 React 中重定向时渲染组件？

How to render a component on redirect in React?

redirect

router

render

reactjs

react-router