Reactjs 如何制作react路由器，根据url更改呈现的文件

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

这是我的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();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“/RouteFile”导入路由文件；
从“/reportWebVitals”导入reportWebVitals；
ReactDOM.render(
,
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;

导入{
BrowserRouter作为路由器，
转换
路线
}从“反应路由器dom”；
从“./App”导入应用程序；
从“/Create”导入创建；
函数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;

import'/App.css'；
进口{
BrowserRouter作为路由器，
链接
}从“反应路由器dom”；
函数App（）{
返回(

创造


打开


探索

);
}
导出默认应用程序；

再次感谢

发行

使用

开关

组件路径顺序和特殊性很重要。“/”是比“/create”更不具体的路径，将首先进行匹配和渲染

应用程序中只需一个

路由器

，即可为所有嵌套路由、交换机和链路组件提供路由上下文

解决方案

在

RouteFile

中，在不太特定的路径之前排序更特定的路径

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

---

这成功了！非常感谢。老实说，我没想到会这么简单。

 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>
   );
 }