问题

Question

我一直在使用 react router，它给我带来的只是麻烦。我想要一个按钮来加载一个新页面，我想要的是有一个类来根据链接切换文件的渲染。我可能用错了东西，但任何朝正确方向的推动都会很棒。

这是我的 3 个主要文件

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import RouteFile from './RouteFile';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <RouteFile />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

RoutFile.js

import {
    BrowserRouter as Router,
    Switch,
    Route
} from "react-router-dom";
import App from './App';
import Create from './Create';
function RouteFile() {
    return (
        <Router>
            <Switch>
                <Route path="/" children={<App />}/>
                <Route path="/create" children={<Create />}/>
            </Switch>
        </Router>
    );
}
export default RouteFile;

App.js

import './App.css';
import {
  BrowserRouter as Router,
  Link
} from "react-router-dom";

function App() {
  return (
    <Router>
    <div className="App background">
        <div className="container">
          <li>
            <Link className="button a" to="/create"><div className="button-container"><div className="icon new"></div><div className="text new-text">Create</div></div></Link>
          </li>
          <li>
            <Link className="button a" to="/open">Open</Link>
          </li>
          <li>
            <Link className="button a" to="/explore">Explore</Link>
          </li>
        </div>
    </div>
    </Router>
  );
}

export default App;

再次感谢！

Answer 1

问题

对于 Switch 组件路由顺序和特殊性很重要。 “/”是比“/create”更不具体的路径，将首先匹配并呈现。
您的应用中只需要一个 Router 即可为所有嵌套路由、开关和链接组件提供路由上下文。

解决方案

在 RouteFile 中将更具体的路径排在不太具体的路径之前。

 <Router>
   <Switch>
     <Route path="/create" children={<Create />}/>
     <Route path="/" children={<App />}/>
   </Switch>
 </Router>

删除 Router 包裹在 App 中的链接。

 function App() {
   return (
     <div className="App background">
         <div className="container">
           <li>
             <Link className="button a" to="/create">
               <div className="button-container">
                 <div className="icon new"></div>
                 <div className="text new-text">Create</div>
               </div>
             </Link>
           </li>
           <li>
             <Link className="button a" to="/open">Open</Link>
           </li>
           <li>
             <Link className="button a" to="/explore">Explore</Link>
           </li>
         </div>
     </div>
   );
 }

如何制作反应路由器，根据 url 更改渲染的文件

1 个答案:

问题

解决方案