关于javascript：React Router无法呈现页面


React Router not rendering page

我有一个名为admin的组件，它是一种可以将我重定向到另一个无法运行的页面的表单。

路由器主

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;

管理组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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(
     
        <ToastContainer />
        {(state && state.isAuthed)? <Redirect to='/adming-panel'/>: false}
        <h1 style={{color:"teal"}}>Admin Panel
        <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>
     
  )

}


export default LoginForm

我要呈现的新页面

1
2
3
4
5
6
7
8
9
10
11
12
const Pannel = () => {

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

export default Pannel

我搜索的所有答案。本来是要在路径之前放置完全相同的关键字，但该组件仍不会呈现空白的空白屏幕，并且在控制台或后端控制台上没有错误。

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

发现关键区别

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

不客气。