<redirect />当我将路由分成其他组件时不起作用

Question

问题是当输入一个不存在的路由时不起作用，只有当我将 /login 和 /register 路由分开在另一个组件中时才会发生这种情况，有什么办法解决吗？ 谢谢阅读

AppRouter.js

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Switch,
    Link,
    Redirect
} from 'react-router-dom'

import JournalScreen from '../screens/JournalScreen'
import AuthRoutes from './AuthRoutes'

export default function AppRouter() {
    return (
        <Router>

            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/noexists">no exists</Link>
                    </li>
                    <li>
                        <Link to="/register">register</Link>
                    </li>
                    <li>
                        <Link to="/login">login</Link>
                    </li>
                </ul>
            </nav>

            <Switch>

                <Route exact path="/" component={JournalScreen} />
                
                <AuthRoutes />

                <Redirect to="/" />

            </Switch>

        </Router>
    )
}

AuthRoutes.js

import React from 'react'
import { Route } from 'react-router-dom'
import LoginScreen from '../screens/LoginScreen'
import RegisterScreen from '../screens/RegisterScreen'

export default function AuthRouter() {
    return (

        <div className="app__auth">

            <Route path="/login" component={LoginScreen} />

            <Route path="/register" component={RegisterScreen} />

        </div>


    )
}

Answer 1

从反应路由器文档：

<Switch>

Renders the first child <Route> or <Redirect> that matches the location.

因此，您的Route组件必须是Switch的直接子组件才能正常工作。
这可以通过在AuthRouter组件中使用片段来解决

export default function AuthRouter() {
  return (
    <>
      <Route path="/login" component={LoginScreen} />
      <Route path="/register" component={RegisterScreen} />
    </>
  )
}

另一件需要注意的是，所有 react-router 函数只能在作为Router组件的子元素的元素中工作。 因此，如果您有另一个不是AppRouter子组件的组件，您将无法使用 react-router 的任何功能

最常见的是，将整个应用程序包装在单个Router组件中是 go 的方式。 这也取自 文档：

To use a router, just make sure it is rendered at the root of your element
hierarchy. Typically you’ll wrap your top-level <App> element in a router

Answer 2

我找到了这个解决方案：

AppRouter.js

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Switch,
    Link,
    Redirect
} from 'react-router-dom'

import JournalScreen from '../screens/JournalScreen'
import AuthRoutes from './AuthRoutes'

export default function AppRouter() {
    return (
        <Router>

            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/noexists">no exists</Link>
                    </li>
                    <li>
                        <Link to="/register">register</Link>
                    </li>
                    <li>
                        <Link to="/login">login</Link>
                    </li>
                </ul>
            </nav>

            <Switch>

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

                <AuthRoutes />

                <Redirect to="/" />

            </Switch>

        </Router>
    )
}

AuthRoutes.js

import React from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import LoginScreen from '../screens/LoginScreen'
import RegisterScreen from '../screens/RegisterScreen'

export default function AuthRoutes() {

    return (

        <div className="app__auth">

            <Switch>

                <Route path="/login" component={LoginScreen} />

                <Route path="/register" component={RegisterScreen} />

                <Redirect to="/" />

            </Switch>

        </div>


    )
}