<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>


    )
}