reactjs - React 路由器中未定义的匹配 url

Question

我有一个像这样的网页布局

***************************************************
* Category  *              Main Area              *
*           *                                     *
* Link 1    *                                     *
* Link 2    *                                     *
* Link 3    *                                     *

例如，当我点击链接 1 时，它会给我以下 URL:

http://localhost:3000/undefined/Link1

最糟糕的是，当我点击链接 2 之后，它会给我这个:

http://localhost:3000/undefined/undefined/Link2

我正在看 Ryan Florence 的 tutorial在 React Router 4 上，这是相当容易理解的。但是，当我尝试在我自己的网站中实现它时(我计划这样做)，它给了我未定义的链接，如前所述。我也是 React 和 React Router 的新手，到目前为止我已经尝试自己解决这个问题，但无法解决。

这是我的App.js

import React, { Component } from 'react';
import MainLayout from './MainLayout';
import {BrowserRouter as Router} from 'react-router-dom';
import '../App.css';

class App extends Component {
 render() {
  return (
   <div className="row">
      <Router>
        <MainLayout>
        </MainLayout>
      </Router>
    </div>
   );
  }
}

export default App;

我的MainLayout.js

import React from 'react';
import SideBar from './SideBar';
import Main from './Main';

const MainLayout=()=> {
 return(
    <div>
        <SideBar />
        <Main />
    </div>
   )
 }

export default MainLayout;

我的SideBar.js

import React from 'react';
import logo from '../readable-logo.png';
import { Route, Link} from 'react-router-dom';
import ReadableList from './ReadableList';

const SideBar = (match) => {
 return(
    <div className="col s3 z-depth-1 App-col-all">
        <img className="responsive-img z-depth-1" src={logo} alt="logo here"/>
        <div className="row">
            <h5 className="center">Categories</h5>
                <ul>
                    <li><Link to={`${match.url}/link1`}>Link 1</Link></li>
                    <li><Link to={`${match.url}/link2`}>Link 2</Link></li>
                    <li><Link to={`${match.url}/link3`}>Link 3</Link></li>
                </ul>
                <Route path={`${match.url}/:categoryId`} component={ReadableList}/>   
        </div>
    </div>
 )
}

export default SideBar;

最后是我的Main.js

import React, {Component} from 'react';

class Main extends Component {
  render() {
    return(
        <div className="App-col-all">
            <div className="col s9">
                <p>Main</p>
            </div>
        </div>
    )
  }
}

export default Main;

Answer 1

ReadableList.js

// ReadableList.js
import React from 'react';

const ReadableList = ({ match }) => {
  return (
    <div>
      {match.params.categoryId}
    </div>
  )
};

export default ReadableList;

Main.js

// Main.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import ReadableList from './ReadableList';

class Main extends Component {
  render() {
    return (
      <div className="App-col-all">
        <div className="col s9">
          <Route path="/" exact={true} render={() => (
            <p>Main</p>
          )} />
          <Route path="/g/:categoryId" component={ReadableList} />
        </div>
      </div>
    )
  }
}

export default Main;

SideBar.js

// SideBar.js
import React from 'react';
import { Link } from 'react-router-dom';

const SideBar = () => {
  return (
    <div className="col s3 z-depth-1 App-col-all">
      <img className="responsive-img z-depth-1" src="{logo}" alt="logo here" />
      <div className="row">
        <h5 className="center">Categories</h5>
        <ul>
          <li><Link to="/g/link1">Link 1</Link></li>
          <li><Link to="/g/link2">Link 2</Link></li>
          <li><Link to="/g/link3">Link 3</Link></li>
        </ul>
      </div>
    </div>
  )
};

export default SideBar;

查看我的解决方案，您可以根据需要进行修改: