简体   繁体   English

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

[英]<Redirect /> doesn't work when I separate the routes into other components

The problem is that when entering a route that does not exist the does not work, this only happens when I separate the / login and / register routes in another component, is there any way to solve it?问题是当输入一个不存在的路由时不起作用,只有当我将 /login 和 /register 路由分开在另一个组件中时才会发生这种情况,有什么办法解决吗? Thanks for reading谢谢阅读

AppRouter.js 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 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>


    )
}

From the react router docs :反应路由器文档

<Switch>

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

So, your Route components have to be direct children of Switch in order to work properly.因此,您的Route组件必须是Switch的直接子组件才能正常工作。
This can be solved by using fragments in your AuthRouter component这可以通过在AuthRouter组件中使用片段来解决

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

Another thing to note is that all react-router functions will only work in elements that are a child of a Router component.另一件需要注意的是,所有 react-router 函数只能在作为Router组件的子元素的元素中工作。 So if you have another component that is not a child of AppRouter , you won't be able to use any of react-router's capabilities因此,如果您有另一个不是AppRouter子组件的组件,您将无法使用 react-router 的任何功能

Most commonly, wrapping your entire app in a single Router component is the way to go.最常见的是,将整个应用程序包装在单个Router组件中是 go 的方式。 This is also taken from the docs :这也取自 文档

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

I found this solution:我找到了这个解决方案:

AppRouter.js 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 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>


    )
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM