0

我有一个工具栏类，其中包含我的开关和路由标签。我的 React 应用程序运行良好。但我现在想创建一个单独的文件，它只专用于路线。我想知道我应该遵循哪些确切步骤来确保一切正常。

<Switch>
      <Route path="/login" component={Login} />
      <Route path="/signup" component={Signup} />
      <Route path="/albums" exact component={AlbumsContainer} />
      <Route path="/albums/:id" children={<SongsContainer />} />
      <Route path="/logout" component={Logout} />

      <Route path="/" exact component={Landing} />
    </Switch>
4

1 回答 1

0

首先安装 react-router-dom

npm install react-router-dom

所以我倾向于将我的 Routes 保留在 中App.js，但您可以创建另一个文件。我倾向于以我的方式编写路由Signup（exact确保链接完全匹配并()=>允许您轻松地将道具发送到您的组件）：

在App.js

// Import the following from React
import React from 'react';
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";

// Import the following pages you use (examples):
import Landing from './pages/Landing';
import Login from './pages/Login';
import Signup from './pages/Signup';
import AlbumsContainer from './pages/AlbumsContainer';
import SongsContainer from './pages/SongsContainer';


function App() {

  return (
    <div className="App">
      <Router>
        <Switch> 
          <Route exact path="/signup" component={() => <Signup someProperty="Hello"/>} />
          <Route path="/login" component={Login} />
          <Route path="/albums" exact component={AlbumsContainer} />
          <Route path="/albums/:id" component={SongsContainer} />
          <Route exact path="/" component={Landing} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

在index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById("root")
);

然后在您拥有的页面中，您可以Link像这样创建和导航：


// PAGE IMPORTS
import React from 'react';
import { Link } from "react-router-dom";

const Signup = (props) => {
  
  return (
    <div>
        <h2>{props.someProperty}</h2>
        <Link to="/login">
          <button>Go to Login </button>
        </Link>
    </div>
  )
}

export default Signup;

为了利用/text/:id我使用以下方法：

在AlbumsContainer.js

import React, { useState, useEffect } from 'react';
import {Link} from "react-router-dom";

const AlbumsContainer= (props) => {

 // The following is an example of how you might use it:
 const indexArray = [0,1,2,3]

 return (
    <div className="page-albums">
      {indexArray.map((index) => {
        return <Link to={`albums/${index}`} key={index}>
                <h2>Song #{index}</h2>
               </Link>
      })}
    </div>
  );
}

export default AlbumsContainer;

在SongsContainer.js：

import React, { useState, useEffect } from 'react';
import { useRouteMatch } from "react-router-dom";

const SongsContainer = (props) => {
  let match =useRouteMatch('/shop/:id').url.split('/');
  match=match[match.length-1]; // your ID

  // Songs
  const songs = ["Moonlight", "Dash Dash", "Some Song", "Other Song"];
  
  return (
    <div className="page-song">
      <h2> {songs[match]} </h2>
    </div>
  );
}
export default SongsContainer;
于 2021-08-10T16:40:47.967 回答