React Router：Router只加载/路径，不加载任何其他路径

Question

我正在尝试使用 Route 从 react-router-dom 加载路径，但它只获取“/”路径，它不加载任何其他路径，身份验证逻辑之前工作正常，但路由似乎没有正在工作，如果我将任何其他组件添加到“/”路径，它将开始加载，但如果我删除“/”并添加任何其他路径，例如“/auth”，它将显示一个空白的白色屏幕。我尝试了很多方法，但找不到任何解决方案， 在添加路由之前，我已经添加了正确的组件，它们工作顺利，现在我是初学者，这对你们来说可能很容易解决，请在这里帮助我，因为我被卡住了，找不到任何解决方案。我希望我的问题很清楚。

App.js

import React, {useContext} from 'react';

import Auth from './Components/Auth/Auth';

import Home from './Pages/Home';

import { AuthContext } from './Context/auth-context';
import {Redirect, Route, Switch } from 'react-router-dom';
import About from './Pages/About';



const  App = props => {

  const authenticated = useContext(AuthContext).auth;

  let routes = (
    <Switch>
    <Route path='/auth' component={Auth} />
    <Route path= "/" exact component={Home}/>
    <Redirect to="/"/>
    </Switch>
   );
  
  if(authenticated){

    routes = (
      <Switch>
      <Route path= '/about' component={About}/>
      <Route path='/auth' component={Auth} />
      <Route path= '/' exact component={Home}/>
      <Redirect to='/'/>
      </Switch>
    )

  }

  return (
    <div>
      {routes}
    </div>
  );
}

export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import ContextProvider from './Context/auth-context';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
    <ContextProvider>
    <BrowserRouter>
    <App />
    </BrowserRouter>
    </ContextProvider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

Answer 1

使用“/”路由的确切路径。在您的代码中，路线包含“确切”关键字，但放错了位置

      let routes = (
        <Switch>
        <Route path='/auth' component={Auth} />
        <Route exact path= "/" component={Home}/>
        <Redirect to="/"/>
        </Switch>
       );
      
      if(authenticated){

        routes = (
          <Switch>
          <Route path= '/about' component={About}/>
          <Route path='/auth' component={Auth} />
          <Route exact path= '/' component={Home}/>
          <Redirect to='/'/>
          </Switch>
        )

      }

Answer 2

我不确定您是否使用重定向。我不知道如何修复您的代码，但您为什么不尝试一下，也许它会有所帮助：

import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import ....
.....
const  App = props => {
const authenticated = useContext(AuthContext).auth;
return (
<Router>
  <Route
     exact
     path="/auth"
     component={Auth}
  />

  <Route
     exact
     path="/"
     render={(props) =>(!authenticated ? <Redirect to={'/auth'}/> 
     : 
     <Home authenticated={authenticated} {...props} />)}
  />
   <Route
      exact
      path="/about"
      render={(props) => (!authenticated ? <Redirect to={'/auth'} 
      /> : 
      <About authenticated={authenticated} {...props} />)}
  />
 
</Router> 
)}