reactjs - 除非刷新页面，否则 React Router 不会显示匹配的组件

Question

我的应用程序在单击按钮时将用户重定向到不同的路由，但不会呈现具有匹配路由的组件，除非页面被刷新。我最近重构了我的应用程序以使用 Redux Toolkit，并更新了我的依赖项，现在遇到了路由问题。

这是我的相关依赖项列表和我的路线设置：

"dependencies": {
    "@material-ui/core": "^4.9.4",
    "@material-ui/icons": "^4.9.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
}

// App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

<Router>
    <NavBar />
        <div>
            <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/login' component={Login} />
              <Route path='/signup' component={Signup} />
            </Switch>
        </div>
</Router>

// NavBar
<Typography>
    <Button component={Link} to='/'>
      Home
    </Button>
</Typography>
<Button component={Link} to='/login'>Login</Button>
<Button component={Link} to='/signup'>Signup</Button>

// Login
<small>
    Don't have an account? Sign up{' '}
        <Router>
            <Link to='/signup'>here</Link>
        </Router>
</small>

// Signup
<small>
    Already have an account? Login{' '}
        <Router>
            <Link to='/signup'>here</Link>
        </Router>
</small>

发生错误行为的已知区域：

• 单击Home button导航会将 url 更改为'/'但不呈现Home component.
• 单击Login button导航会将 url 更改为'/login'但不呈现Login component.
• 单击Signup button导航会将 url 更改为'/signup'但不呈现Signup component.

尝试的解决方案：

• 使用onClick={() => history.push('/')}会为操作呈现正确的组件，但不会更改 url 路由。示例：当用户当前在 Home url'/'路由时，单击NavBar的注册按钮将呈现Signup组件，但不会将 url 路由更改为'/signup'. 刷新后，用户将返回到 url route '/'。
• 使用 withRouter(withStyles(styles)(Login))
• 像这样将BrowserRouter包装应用程序放入index.js文件中<BrowserRouter><App></BrowserRouter>
• withRoute像这样使用component={withRouter(Login)}
• 检查路线的顺序
• 像这样尝试不同的导入import { BrowserRouter as Router, Route, Switch } from 'react-router' instead of 'react-router-dom'
• 像这样包装url链接<Button color='inherit' component={Link} to={'/'} />
• NavBar 按钮将渲染组件，但现在 url 路由不会随此代码更改onClick={() => history.push('/login’)}
• Link像这样使用<Link to='/'><Button>Home</Button></Link>

我究竟做错了什么？谢谢。

标签： reactjsreact-routermaterial-uiredux-toolkit