React Router 不渲染页面

Question

我有一个名为 admin 的组件，它是一种表单，可以将我重定向到另一个页面，但渲染不起作用。

路由器主要

const globalState = {
  isAuthed: false,
  token: null,
};

export const  AuthContext = React.createContext(globalState);

function App() {

  const [currentUser, setCurrentUser] = useState(globalState)
  return (
    <AuthContext.Provider value={[currentUser, setCurrentUser]}>
      <Router>
        <Switch>
          <Route exact path="/admin" component={Admin} />
          <Route exact path="/admin-panel" component={Pannel} />
        </Switch>
      </Router>
      </AuthContext.Provider>

  )
}

export default App;

管理组件

const LoginForm = () => {

  const [state, setState] = useContext(AuthContext)

  const login = (state) => {
    const user = document.getElementById('user').value;
    const pass = document.getElementById('pass').value;
    const request = {
      user,
      pass
    }
    console.log(request)
    fetch('/api/admin', {
      method: "post",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(request),
    })
    .then(res => res.json())
    .then(res => {
      if(res.auth){
        valid(5000,"Login Success. Redirecting in 3 second")
        setTimeout(() =>{
          setState({isAuthed: res.auth, token: res.key})
        }, 3000)

      }
      else{
        warn(5000,res.message)
      }
    })
  }

  return(
      <div style={css}>
        <ToastContainer />
        {(state && state.isAuthed)? <Redirect to='/adming-panel'/>: false}
        <h1 style={{color: "teal"}}>Admin Panel</h1>
        <Form id="login-form" size='large' style={{backgroundColor: "white"}}>
          <Segment stacked>
            <Form.Input id="user" fluid icon='user' iconPosition='left' placeholder='E-mail address' />
            <Form.Input
              fluid
              icon='lock'
              iconPosition='left'
              placeholder='Password'
              type='password'
              id="pass"
            />
            <Button onClick={() => login(state)} color='teal' fluid size='large'>
              Login
            </Button>
          </Segment>
        </Form>
      </div>
  )

}


export default LoginForm

我要渲染的新页面

const Pannel = () => {

  const [state, setState] = useContext(AuthContext)
  return (   
    <div>
      {(!state || !state.isAuthed)? <Redirect to='/adming-panel'/>: false}
      Secret Page
    </div>
  )
}

export default Pannel

我搜索的所有答案。是在路径之前放置确切的关键字，但组件仍然不会呈现，只会出现一个空的白色屏幕，并且控制台或后端控制台上没有错误。

Answer 1

<Route exact path="/admin-panel" component={Pannel} />

找出关键区别

<Redirect to='/adming-panel'/>

不客气。

React Router 不渲染页面

React Router not rendering page

javascript

state

render

reactjs

react-hooks