反应路由器

Question

我有像

这样的网页布局

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

例如，当我点击链接1 时，它会显示以下网址：

http://localhost:3000/undefined/Link1

最糟糕的是，当我点击 Link 2 之后，它会给我这个：

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

我在React Router 4上看着Ryan Florence的tutorial，这很容易理解。但是当我尝试在我自己的网站上实现它时，我正计划这样做，它给了我前面提到的未定义的链接。我也是React和React路由器的新手，我到目前为止尝试自己解决但不能。

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

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

Answer 2

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

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 withRotuer(SideBar);

Answer 3

match不是唯一传递给SideBar组件的道具。你需要使用props.match.url或者像这样去构建道具

const SideBar = ({match}) => {
   //...
}

如果您的组件由于某种原因没有正确接收react-router道具，您可以尝试将您的组件包装在withRouter() HOC中。