在React应用中使用button click进行路由

Question

我正在构建一个基本的react应用程序，其中单击一个按钮应该在同一选项卡中打开一个新页面。我已经使用了React Router，但是它不适合我。

我想重定向到一个状态比如，localhost/test，这是我的index。js

import Test from './test/Test'
import { Route } from 'react-router-dom';
const myFirstElement = <>
<Button onClick={() => window.location.href='test'}>Click me</Button> 
<Route path='test' element={< Test />}></Route>
</>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);

我的Test.js包含

const Test = <><h1>Hello React!</h1></>
export default Test;

问题是上面的代码不渲染屏幕上的任何东西，它也不显示任何错误。但是当我去掉

<Route exact path='/test' element={< Test />}></Route>

上面的代码，一个按钮被呈现在屏幕上，点击按钮会改变url，但不会改变状态。

任何帮助都将不胜感激。

Answer 1

Issue

当index.js文件只包含Route组件时，检查Route组件是否由Routes或其他Route组件直接呈现的不变式失败，并且检查路由上下文是否由路由器组件提供的不变式失败。这就是为什么当您删除<Route path='/test' element={< Test />} />时代码会运行。

另一个问题是使用window.location更改URL。当这种情况发生时，它会重新加载页面，从而重新加载React应用程序。你应该使用react-router-dom钩子和组件在应用程序中导航。

<标题>

解决方案应用程序需要呈现至少一个路由器，并将所有Route组件封装在Routes中。使用useNavigate钩子访问navigate函数，发出到"/test"路径的命令式导航操作。

的例子:

import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
import Test from './test/Test'
const MyFirstElement = () => {
const navigate = useNavigate();
return (
<>
<Button onClick={() => navigate('test')}>Click me</Button>
<Routes>
<Route path='test' element={<Test />} />
</Routes>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));  root.render(
<Router>
<MyFirstElement />
</Router>
);

Answer 2

如果我没弄错的话，那么你肯定需要将应用程序封装在BrowserRouter中。

import * as React from "react";
import * as ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
{/* The rest of your app goes here */}
<App/>
</BrowserRouter>,
root
);

路由器必须用Routes

封装应用组件:

import React from 'react';
import {Navigate, Route, Routes, useNavigate} from "react-router-dom";
function App() {
return (
<div className={styles.App}>
<Routes>
<Route path="/" element={<Test/>}/>
</Routes>
</div>
);
}
export default App;